使用 z-index 將一張圖像疊加到另一張圖像中

Question

我正在嘗試將一個圖像疊加到另一個圖像中，但它不起作用。

我的代碼

 body { background: #000000 50% 50%; height: 100% width:100%; overflow-x: hidden; overflow-y: hidden; }.neer { z-index: 100; position: absolute; }.mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 30px; }

 <div class="mobile"> <p style="color: blue; font-size: 40px;">Overlay image</p> <div class="neer"> <img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" /> </div> <div> <img src="https://place-hold.it/338x280" /> </div> </div>

我沒有使用margin-top或margin-bottom因為我正在尋找響應。 定義邊距有時會破壞不同結構的布局。

Answer 1

將兩個圖像放在一個帶有position: relative;的div中：relative; . 將此 class 添加到應位於頂部的圖像中：

.neer {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
}

 body { background: #000000 50% 50%; height: 100% width:100%; overflow-x: hidden; overflow-y: hidden; }.neer { z-index: 100; position: absolute; top: 0; left: 0; }.mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 30px; }

 <div class="mobile"> <p style="color: blue; font-size: 40px;">Overlay image</p> <div style="position: relative;"> <img src="https://place-hold.it/338x280" /> <img class="neer" src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" /> </div> </div>

Answer 2

有很多方法可以做到這一點。 使用您的給定代碼的一種簡單方法是從mobile中刪除flex樣式並將其放入body 。

 * { /* border: 1px solid red; */ } body { background: #000000 50% 50%; height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden; display: flex; align-items: center; justify-content: center; }.neer { z-index: 100; position: absolute; }.mobile { /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ /* justify-content: center; */ height: 100%; gap: 30px; }

 <div class="mobile"> <p style="color: blue; font-size: 40px;">Overlay image</p> <div class="neer"> <img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" /> </div> <div class="behind"> <img src="https://place-hold.it/338x280" /> </div> </div>

更好的方法是將both pictures放在一個div中，然后在該div中給它們same position 。

 * { /* border: 1px solid red; */ } body { background: #000000 50% 50%; height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden; display: flex; align-items: center; justify-content: center; }.container { display: flex; align-items: center; justify-content: center; }.neer { z-index: 100; position: absolute; }.mobile { /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ /* justify-content: center; */ height: 100%; gap: 30px; }

 <div class="mobile"> <p style="color: blue; font-size: 40px;">Overlay image</p> <div class="container"> <div class="neer"> <img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" /> </div> <div class="behind"> <img src="https://place-hold.it/338x280" /> </div> </div> </div>

如果我們知道您為什么要這樣做，可能會有更好的方法。