使文本显示在相对定位的图像前面

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结构，请提供posibble解决方案。

Answer 2

为了使z-index工作，它不能定位为静态（默认）。 在这种情况下，尝试position：relative和z-index将起作用。

Answer 3

尝试将两个元素放在一个position: relative的容器中。

然后你可以绝对定位子项并将z-index应用于它们。

我也将文本集中在插图中。

总是要记住： 除非您使用flex项目或网格项目，否则必须定位一个元素才能使z-index工作（ 详细信息 ）。

 #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>