下面我們來講一下如何利用CSS將圖片向下移動調整位置。
首先,在HTML文檔中需要調整位置的圖片加上一個類名或id名,方便在CSS中進行選擇器的定位。
例如我們要調整的圖片類名為 “myImg”,那在HTML中就應該寫成:接下來,我們就可以在CSS中找到這個類名并進行定位。
我們可以利用CSS屬性 “position” 和 “top” 單獨或一起來控制圖片向下移動的位置。
例如,我們希望把圖片向下移動20像素,CSS代碼應該為:
.myImg { position: relative; top: 20px; }在這個例子中,我們使用了相對定位(relative position)的方式來讓圖片相對于原本所在的位置進行移動,然后通過 “top” 屬性將圖片沿著垂直方向向下移動了20像素。 如果你想讓圖片距離頂部20像素的位置放置,就可以使用絕對定位(absolute position),代碼如下:
.myImg { position: absolute; top: 20px; }這樣,圖片就會距離包含它的元素(比如div或p標簽)的頂部位置向下移動20像素。 總結一下,要利用CSS調整圖片位置,需要添加一個類名或id名作為選擇器,然后通過position屬性和top屬性來調整圖片的位置。
下一篇css圖片向四周擴大