Текст перед появлением относительно позиционированного изображения

Question

У меня есть изображение position: relative и оно перебирает текст.

Есть ли способ сделать текст перед изображением?

Я попытался возиться с z-index, но безрезультатно.

Вот мой код

h2 { 
 
    padding-top: 100px; 
 
} 
 

 
img { 
 
    position: relative; 
 
    top: -150px; 
 
}

<h2>1715</h2> 
 
    <div class="img-wrapper"> 
 
     <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" > 
 
    </div> 
 
      

Answer 1

h2 { 
 
    padding-top: 100px; 
 
    z-index:1; 
 
    position:relative; 
 
} 
 

 
img { 
 
    position: relative; 
 
    top: -200px; 
 
    z-index:0; 
 
}

<h2>1715</h2> 
 
    <div class="img-wrapper"> 
 
     <img src="https://bootstrapbay.com/blog/wp-content/uploads/2014/05/unslpash-desert-road_uvsq5s.png" > 
 
    </div>

posibble решение, если вы не хотите, чтобы изменить HTML структуру.

Answer 2

Для того, чтобы z-index работал, он не может быть установлен статическим (по умолчанию). В этом случае попробуйте положение: относительный и z-индекс будут работать.

Answer 3

Попробуйте поместить оба элемента в контейнер с помощью position: relative.

Затем вы можете абсолютно поместить детей и применить к ним z-index.

Я также сосредоточил текст на иллюстрации.

Всегда хорошо иметь в виду: Если вы не работаете с предметами изгиба или элементами сетки, элемент должен быть расположен для z-index для работы (details).

#container { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin: 0; 
 
} 
 
img {}

<div id="container"> 
 
    <h2>1715</h2> 
 
    <div class="img-wrapper"> 
 
    <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg"> 
 
    </div> 
 
</div>

Answer 4

вы можете решить ее таким образом.

h2 { 
    padding-top: 94px; 
position: relative; 
z-index: 999; 
    } 

    img { 
     position: absolute; 
top: 0; 
    } 

h2 { 
 
    padding-top: 94px; 
 
    position: relative; 
 
    z-index: 999; 
 
    } 
 

 
    img { 
 
    position: absolute; 
 
    top: 0; 
 
    }

<h2>1715</h2> 
 
    <div class="img-wrapper"> 
 
     <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" > 
 
    </div>