前端開發(fā)中，圖片是網(wǎng)頁中必不可少的元素之一，而圖片的排布也是非常重要的。本文將介紹如何使用CSS來實現(xiàn)圖片重疊排布效果。

.img-container {
position: relative;
width: 600px;
height: 400px;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
}
.img-1 {
z-index: 1;
}
.img-2 {
z-index: 2;
}
.img-3 {
z-index: 3;
}

首先，我們需要創(chuàng)建一個圖片容器，使用position: relative;讓它相對定位，這樣就可以在其內(nèi)部創(chuàng)建絕對定位的元素。

接下來，我們需要創(chuàng)建幾個需要重疊的圖片，使用position: absolute;讓它們絕對定位之后，使用top和left屬性來確定它們的位置。

我們需要使用z-index屬性來確定各個圖片的層級關(guān)系，數(shù)值越大的圖片層級越高，越靠近用戶。

接下來的例子中，我們?yōu)槿齻€``標(biāo)簽應(yīng)用了`.img-1`、`.img-2`和`.img-3`這三個類名，并且為每個類添加了不同大小的圖片。使用如上代碼，就可以實現(xiàn)圖片重疊，同時又可以讓圖片的深度關(guān)系得以展現(xiàn)了。

<div class="img-container">
<img src="img-1.png" class="img-overlay img-1">
<img src="img-2.png" class="img-overlay img-2">
<img src="img-3.png" class="img-overlay img-3">
</div>