CSS圖片坐標(biāo)的寫法

在CSS中，我們可以使用position屬性來定義圖片的位置，即坐標(biāo)。position屬性有以下幾個(gè)值：static、relative、absolute、fixed和sticky。relative、absolute、fixed和sticky都支持使用top、right、bottom和left屬性來定義圖片的具體位置。

我們可以這樣寫：

img {
  position: absolute;
  top: 50px;
  left: 100px;
}

這段代碼的意思是將圖片元素定位在距離頁面頂部50像素、距離頁面左側(cè)100像素的位置。

需要注意的是，如果父元素設(shè)置了position屬性，那么子元素的position屬性將會(huì)繼承父元素的position值，如果父元素沒有設(shè)置position屬性，那么子元素的position屬性將會(huì)默認(rèn)為static。

如果我們需要將圖片元素居中顯示，可以使用margin: auto;來實(shí)現(xiàn)。

img {
  position: static;
  margin: auto;
}

這段代碼的意思是將圖片元素居中顯示，由于position屬性為static，所以圖片元素將會(huì)按照正常的文檔流進(jìn)行排版，而margin: auto;則會(huì)使瀏覽器自動(dòng)計(jì)算圖片元素的左右邊距，從而實(shí)現(xiàn)居中顯示的效果。