CSS 中的相對定位是一種非常強大的屬性，它能夠將元素相對于其正常位置進行定位，而不將其移動到其他位置。這使得相對定位成為在圖像上覆蓋其他元素的首選方法之一。 假設您有一個帶有多個元素的 HTML 頁面，您想在一張圖片上放置一些文本，同時保持文本和圖像相對穩定的位置。這時候相對定位就非常有用了，您可以使用下面的代碼進行實現：

img {
position: relative;
}
p {
position: absolute;
top: 50px;
left: 50px;
}

在這段代碼中，我們首先將圖像的定位方式設為相對定位，這意味著它將保持在正常的文檔流中，但可以移動和相對定位。其次，我們使用相對定位將文本設置為絕對定位，而不是相對于父容器進行定位。我們還使用 top 和 left 屬性將文本向右下方移動了 50 像素，使其與圖像對齊。 這種方法不僅可以用于覆蓋圖像上的文本，還可以用于創建一個懸浮菜單或彈出框。您只需將菜單或彈出框元素定位為相對定位，再使用絕對定位將其移到所需位置，就可以創建出一個美觀而實用的效果。 總的來說，使用 CSS 相對定位覆蓋圖像是一種靈活而實用的技巧，可以讓您在頁面中創建出各種美觀的效果。仔細掌握相對定位的實現方式，并將其巧妙地應用到您的代碼中，相信將幫助您創建出令人印象深刻的頁面。