在網頁設計中，常常需要將一些文字與圖片結合起來展示，而這時我們常常需要用到 CSS 的一個特性——讓文字出現在圖片的上方。 為了實現這個效果，我們可以使用 CSS 中的 `position` 屬性來將圖片定位為 `relative`，并且將文字定位為 `absolute`，再用 `top` 和 `left` 等屬性來控制它們的位置。 下面是一段代碼示例，可以讓您更好地理解： ```html

這是一張圖片，以及一些文字。

``` ```css /* CSS 代碼 */ .img-container { position: relative; } .text { position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); color: #fff; padding: 8px; } ``` 在上面的示例代碼中，我們將 `img-container` 的 `position` 屬性設置為 `relative`，這是因為我們想要將 `position` 為 `absolute` 的 `.text` 定位到其上方。接下來，我們對 `.text` 進行了如下樣式的設置： - `position: absolute;` 讓其脫離文檔流，并相對于其最近的定位祖先元素進行定位，也就是 `img-container`； - `top: 0;` 和 `left: 0;` 讓其位于 `img-container` 的左上角，也就是圖片的上方； - `background-color: rgba(0,0,0,0.5);` 和 `color: #fff;` 分別給定了文字的背景色和字體顏色； - `padding: 8px;` 為文字添加了一些內邊距，讓其顯示得更加美觀。 通過上述 CSS 代碼，我們就成功地將文字顯示在了圖片的上方，從而達到了較為理想的頁面效果。 需要注意的是，在進行此類排版時，我們需要仔細考慮文字與圖片的大小、位置關系，以及不同設備上的布局適配等因素，以確保所呈現的頁面具備優秀的可用性和用戶體驗。