在網頁設計中，常常需要在一張圖片上放置另一張圖片。這個需求通常是為了對原有的圖片進行修飾、裝飾或者標識。CSS提供了多種實現方法，其中最常用的是通過絕對定位來將兩張圖片放在同一位置。

<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容器中，并設置了覆蓋圖片的z-index值為1，讓它顯示在原始圖片的上方。然后，通過將父容器的position屬性設為relative，以及子元素的position屬性設為absolute，將兩張圖片都定位在了容器的左上角。

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

絕對定位在美化網頁時應該比較常見，它有多種應用，包括圖片上的圖片、放置菜單或工具欄、部分滾動頁面和控制元素位置。熟悉絕對定位，可以幫助我們更好地實現復雜的網頁布局。