CSS中可以使用相對定位(relative positioning)或***定位(absolute positioning)將文字放置在圖片上面。
相對定位是指將元素相對于其正常位置進(jìn)行定位,而***定位則是將元素相對于瀏覽器窗口進(jìn)行定位。
以下是一個使用相對定位將文字放在圖片上面的示例:
<div style="position: relative;"> <img src="image.jpg" style="width: 100px; height: 100px;"> <div style="position: absolute; top: 0; left: 0;"> 這是一段文字 </div> </div>
在這個示例中,圖片被設(shè)置為相對定位,而文字則被設(shè)置為***定位,***定位的元素會覆蓋在相對定位的元素上面。top: 0; left: 0;
將文字放置在圖片的左上角。
你也可以使用***定位將文字放置在圖片的其他位置,
<div style="position: relative;"> <img src="image.jpg" style="width: 100px; height: 100px;"> <div style="position: absolute; top: 20px; left: 30px;"> 這是一段文字 </div> </div>
在這個示例中,文字被放置在圖片的右上角,距離圖片邊緣20像素和30像素。
使用***定位時(shí),元素的位置是相對于瀏覽器窗口的,而不是相對于其父元素,即使你改變了父元素的位置,***定位的元素也會保持在相同的位置。