在網(wǎng)頁設(shè)計(jì)中，常常需要在一張圖片上放置另一張圖片。這個(gè)需求通常是為了對(duì)原有的圖片進(jìn)行修飾、裝飾或者標(biāo)識(shí)。CSS提供了多種實(shí)現(xiàn)方法，其中最常用的是通過絕對(duì)定位來將兩張圖片放在同一位置。

<div class="container">
<img src="original.jpg" alt="原始圖片">
<img src="overlay.png" alt="覆蓋圖片">
</div>
.container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
img:last-of-type {
z-index: 1;
}

在這段代碼中，我們首先將兩張圖片都放在同一div容器中，并設(shè)置了覆蓋圖片的z-index值為1，讓它顯示在原始圖片的上方。然后，通過將父容器的position屬性設(shè)為relative，以及子元素的position屬性設(shè)為absolute，將兩張圖片都定位在了容器的左上角。

如果需要使后面的圖片在一個(gè)元素上實(shí)現(xiàn)透明遮罩，可以設(shè)置其背景為半透明rgba值或者使用遮罩層。

絕對(duì)定位在美化網(wǎng)頁時(shí)應(yīng)該比較常見，它有多種應(yīng)用，包括圖片上的圖片、放置菜單或工具欄、部分滾動(dòng)頁面和控制元素位置。熟悉絕對(duì)定位，可以幫助我們更好地實(shí)現(xiàn)復(fù)雜的網(wǎng)頁布局。