CSS中可以使用相對定位(relative positioning)或***定位(absolute positioning)來移動(dòng)圖片,相對定位是相對于元素在文檔流中的位置進(jìn)行定位,而***定位則是相對于瀏覽器窗口進(jìn)行定位。
以下是一個(gè)使用相對定位在邊框內(nèi)移動(dòng)圖片的例子:
<div style="width: 200px; height: 200px; border: 1px solid black;"> <img style="position: relative; left: 10px; top: 10px;" src="image.jpg" /> </div>
在這個(gè)例子中,圖片相對于包含它的div元素進(jìn)行定位,left
和top
屬性分別表示圖片距離div元素左邊和頂部的距離,這樣,圖片就可以在邊框內(nèi)移動(dòng)了。
如果你想要使用***定位,可以將圖片的position
屬性設(shè)置為absolute
,然后使用left
、top
、right
和bottom
屬性來設(shè)置圖片在瀏覽器窗口中的位置。
<div style="width: 200px; height: 200px; border: 1px solid black; position: relative;"> <img style="position: absolute; left: 20px; top: 20px;" src="image.jpg" /> </div>
在這個(gè)例子中,圖片相對于瀏覽器窗口進(jìn)行定位,left
和top
屬性分別表示圖片距離瀏覽器窗口左邊和頂部的距離,這樣,圖片就可以在邊框內(nèi)***定位了。