在CSS中，我們可以使用position屬性來控制圖片的位置，為了讓圖片上下浮動，我們可以使用position: relative;或者position: absolute;配合top和bottom屬性來實現(xiàn)。

1、使用position: relative;

當使用position: relative;時，圖片會相對于其原始位置進行移動，通過top和bottom屬性，我們可以指定圖片上下移動的距離。

如果我們想讓圖片向下移動20像素，可以這樣寫：

img {
  position: relative;
  top: -20px;
}

相反，如果我們想讓圖片向上移動20像素，可以這樣寫：

img {
  position: relative;
  top: 20px;
}

2、使用position: absolute;

當使用position: absolute;時，圖片會相對于***近的非靜態(tài)定位（即position: relative;或position: absolute;）的父元素進行移動，如果沒有這樣的父元素，圖片會相對于初始包含塊（即HTML元素）進行移動。

如果我們有一個包含塊（如<div>）設置了position: relative;，我們可以讓圖片相對于這個包含塊上下移動：

<div style="position: relative;">
  <img style="position: absolute; top: -20px;" src="image.jpg" />
</div>

這樣，圖片就會相對于包含塊向下移動20像素。

使用position: absolute;時，如果沒有設置top、right、bottom或left屬性，圖片會默認位于其父元素的中心，在使用***定位時，通常需要明確設置***少一個維度（如top或left）以防止圖片出現(xiàn)在錯誤的位置。