CSS中,可以使用相對定位(relative positioning)或***定位(absolute positioning)將文字放置在圖片的后邊,具體實(shí)現(xiàn)方法可以根據(jù)實(shí)際需求選擇。
相對定位是相對于元素在文檔流中的位置進(jìn)行定位,可以通過調(diào)整top、right、bottom、left屬性來移動元素,以下是一個相對定位的例子:
<div style="position: relative;"> <img src="image.jpg" style="position: relative; left: 0; top: 0;"> <p style="position: relative; left: 10px; top: 10px;">這是放在圖片后邊的文字</p> </div>
在這個例子中,圖片和段落都相對于div元素進(jìn)行定位,由于圖片和段落的left和top屬性都設(shè)置為0,所以它們會在div元素的左上角對齊,通過調(diào)整段落元素的left和top屬性,可以將段落移動到圖片的后邊。
***定位是相對于瀏覽器窗口進(jìn)行定位,可以通過調(diào)整top、right、bottom、left屬性來移動元素,以下是一個***定位的例子:
<div style="position: absolute;"> <img src="image.jpg" style="position: absolute; left: 0; top: 0;"> <p style="position: absolute; left: 10px; top: 10px;">這是放在圖片后邊的文字</p> </div>
在這個例子中,圖片和段落都相對于瀏覽器窗口進(jìn)行定位,由于圖片和段落的left和top屬性都設(shè)置為0,所以它們會在瀏覽器窗口的左上角對齊,通過調(diào)整段落元素的left和top屬性,可以將段落移動到圖片的后邊。
需要注意的是,使用***定位時(shí),元素的位置不會隨著頁面滾動條的移動而改變,因此它通常用于固定位置的元素,如頁眉、頁腳或側(cè)邊欄等,而相對定位則適用于需要隨著頁面滾動條移動的元素,如列表項(xiàng)、段落等。