使文本顯示在相對定位的圖像前面

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>