CSS控制圖像位置的方法

在CSS中，我們可以使用多種方法來控制圖像的位置，***常用的是使用position屬性，該屬性有以下幾個值：static、relative、absolute、fixed和sticky。

static：這是默認(rèn)值，圖像按照其在HTML中的位置進(jìn)行顯示，不會受到其他元素的影響。

relative：相對于其正常位置進(jìn)行定位，可以使用top、right、bottom和left屬性來調(diào)整位置。

absolute：相對于***近的已定位祖先元素進(jìn)行定位，如果沒有已定位的祖先元素，那么相對于初始包含塊進(jìn)行定位。

fixed：相對于瀏覽器窗口進(jìn)行定位，即使頁面滾動，它也會保持在相同的位置。

sticky：根據(jù)用戶的滾動位置在相對定位和固定定位之間切換。

如果我們想要將一張圖片向右移動20px，我們可以這樣寫：

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

或者，如果我們想要將圖片固定在屏幕的右下角，我們可以這樣寫：

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

CSS還提供了transform屬性，可以用來移動、旋轉(zhuǎn)、縮放或傾斜圖像，我們可以這樣將圖片向右移動30px：

img {
    transform: translateX(30px);
}

或者使用translate()函數(shù)來同時移動x軸和y軸：

img {
    translate: (50px, 10px);
}

使用transform屬性時，圖像會保持其原始大小，而不會改變其尺寸，如果需要調(diào)整圖像尺寸，可以使用width和height屬性。