Почем при размещении блока на картинке, картинка постоянно впереди?

Question

[msimrial]

Пример
реализовал для старшего блока

• position: absolute;
  
• width: 40px;
  
• height: 40px;
  
• background-color: grey;
  
• top: 0px;
  
• z-index: 9999;
  

UPD - https://jsfiddle.net/u6694mom/

Comments

[Grigruss]

Весь код в студию. Что значит "старший блок"?

Answer 1

[Grigruss]

Типичный пример:

.image-block{background:url('image-file.jpg')no-repeat center;background-size:contain;}

<div class="image-block">
    Можно даже без блока. Текст будет поверх картинки.
    <div>А можно и с блоком. Тоже будет поверх картинки, если у текущего div будет position:relative.</div>
</div>

Comments

[msimrial]

идет так
div - relative
a -relative
img
/a
/div

[msimrial]

результат все тотже -> joxi.ru/vAW34aeHWqRjAW

[Grigruss]

msimrial: лучше воспроизвести текущую ситуацию с блоками здесь. Потому что я ничего понять не могу...

[msimrial]

https://jsfiddle.net/u6694mom/ прошу

[Grigruss]

msimrial: ситуация сейчас такова: У вас блок DIV, которому присваивается z-index:9999 и следом создается картинка IMG. Результат мы видим. Все правильно.
Чтобы получить результат который нужен вам, надо z-index:9999 присвоить ПОСЛЕД появления картинки на странице. Проще это сделать в jQuery если используется...

$('div.product-image-container').css('z-index',9999);

Но можно и другие варианты.
А самый простой - поменять блоки местами. :-)