CSS固定圖片的方法

在CSS中，我們可以使用position屬性來固定圖片，position屬性有以下幾個值：static、relative、absolute、fixed，static是默認值，圖片會按照正常的文檔流進行排版；relative是相對于其正常位置進行定位；absolute是相對于其***近的非static定位祖先元素進行定位；fixed則是相對于瀏覽器窗口進行定位。

如果我們想要固定圖片在頁面的某個位置，可以使用position: fixed;來設(shè)置，如果我們想要將圖片固定在頁面的右下角，可以編寫如下代碼：

img {
  position: fixed;
  bottom: 0;
  right: 0;
}

這段代碼會將圖片元素固定在頁面的右下角，無論頁面如何滾動，圖片都會保持在同一個位置，需要注意的是，如果圖片所在元素不是img，而是div或者其他元素，那么需要將其轉(zhuǎn)換為img元素才能生效。

如果想要圖片在頁面中居中顯示，可以使用position: absolute;并配合top、left、right、bottom屬性進行設(shè)置。

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

這段代碼會將圖片元素***定位在頁面的中心位置，無論頁面如何滾動，圖片都會保持在中心位置，需要注意的是，transform屬性會將元素進行位移，使得圖片在頁面中居中顯示。