html - 使文本出现在相对定位的图像前面

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>

如果您不想更改 html 结构，可能的解决方案。