CSS中,我們可以使用相對(duì)定位(relative positioning)或***定位(absolute positioning)來(lái)將文字置于圖片下方。
相對(duì)定位是相對(duì)于元素在文檔流中的位置進(jìn)行定位,而***定位是相對(duì)于瀏覽器窗口進(jìn)行定位。
下面是一個(gè)使用相對(duì)定位將文字置于圖片下方的示例:
<div style="position: relative;"> <img src="image.jpg" style="width: 200px; height: 200px;"> <p style="position: relative; top: 50px; left: 0;">這是圖片下方的文字</p> </div>
在這個(gè)示例中,我們首先將圖片和段落元素都設(shè)置為相對(duì)定位,我們通過(guò)調(diào)整段落的top
屬性,將段落元素向下移動(dòng)50像素,使其位于圖片下方。
***定位的使用方式與相對(duì)定位類似,只是參考點(diǎn)不同,以下是一個(gè)使用***定位將文字置于圖片下方的示例:
<div style="position: absolute;"> <img src="image.jpg" style="width: 200px; height: 200px; position: absolute; left: 0; top: 0;"> <p style="position: absolute; left: 0; top: 250px;">這是圖片下方的文字</p> </div>
在這個(gè)示例中,我們將圖片和段落元素都設(shè)置為***定位,我們通過(guò)調(diào)整段落的top
屬性,將段落元素向下移動(dòng)250像素,使其位于圖片下方,注意,由于***定位的元素會(huì)脫離文檔流,因此我們需要手動(dòng)設(shè)置圖片和段落的寬度和高度,以確保它們能夠正確顯示。