在網(wǎng)頁設(shè)計中，有時需要將一張圖片浮在另一張圖片的上方，從而達到一種特殊的效果。這時，我們就可以利用 CSS 中的 z-index 屬性來實現(xiàn)。

首先，我們需要在 HTML 文件中添加兩張圖片：

<div class="container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>

在 CSS 中，我們可以利用 position 屬性來控制兩張圖片的位置。我們將其中一張圖片定位為相對定位，另一張圖片定位為絕對定位。這里我們將 image1 設(shè)置為相對定位，image2 設(shè)置為絕對定位，并添加 z-index 屬性為1，使其浮在 image1 上方：

.container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
img:nth-child(1) {
z-index: 0;
}
img:nth-child(2) {
z-index: 1;
}

這里的 nth-child(n) 選擇器是用來選擇第 n 個元素的。因為我們要將第二張圖片浮在第一張圖片上方，所以我們將第二張圖片的 z-index 屬性設(shè)置為 1，而將第一張圖片的 z-index 屬性設(shè)置為 0。

通過這樣的方式，我們就可以輕松地實現(xiàn)圖片浮在圖片上的效果了。