本文目錄導(dǎo)讀：

1. 相對(duì)定位
2. ***定位
3. 固定定位
4. 動(dòng)畫(huà)和過(guò)渡

CSS圖片移動(dòng)的奧秘

在CSS中，我們可以使用多種方法來(lái)移動(dòng)圖片，這些方法包括使用相對(duì)定位、***定位、固定定位以及動(dòng)畫(huà)和過(guò)渡等，下面，我將為您詳細(xì)介紹如何使用這些方法讓圖片在CSS里移動(dòng)。

相對(duì)定位

相對(duì)定位是指圖片相對(duì)于其正常位置進(jìn)行移動(dòng)，我們可以通過(guò)設(shè)置圖片的left、right、top、bottom屬性來(lái)實(shí)現(xiàn)相對(duì)定位，如果我們想要將一張圖片向右移動(dòng)50像素，我們可以這樣寫(xiě)：

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

***定位

***定位是指圖片相對(duì)于其***近的已定位祖先元素進(jìn)行移動(dòng)，如果沒(méi)有已定位的祖先元素，那么圖片將相對(duì)于初始包含塊進(jìn)行移動(dòng)，我們可以通過(guò)設(shè)置圖片的left、right、top、bottom屬性來(lái)實(shí)現(xiàn)***定位，如果我們想要將一張圖片***定位在距離頁(yè)面頂部20像素、左側(cè)30像素的位置，我們可以這樣寫(xiě)：

img {
    position: absolute;
    top: 20px;
    left: 30px;
}

固定定位

固定定位是指圖片相對(duì)于瀏覽器窗口進(jìn)行移動(dòng)，即使頁(yè)面滾動(dòng)，圖片也會(huì)保持在同一位置，我們可以通過(guò)設(shè)置圖片的left、right、top、bottom屬性來(lái)實(shí)現(xiàn)固定定位，如果我們想要將一張圖片固定在頁(yè)面底部，無(wú)論頁(yè)面如何滾動(dòng)，圖片始終保持在底部，我們可以這樣寫(xiě)：

img {
    position: fixed;
    bottom: 0;
}

動(dòng)畫(huà)和過(guò)渡

除了以上三種方法外，我們還可以利用CSS的動(dòng)畫(huà)和過(guò)渡特性來(lái)讓圖片在CSS里移動(dòng)，通過(guò)定義關(guān)鍵幀動(dòng)畫(huà)或過(guò)渡效果，我們可以實(shí)現(xiàn)更復(fù)雜的圖片移動(dòng)效果，我們可以使用@keyframes規(guī)則來(lái)定義一個(gè)從左側(cè)到右側(cè)的移動(dòng)動(dòng)畫(huà)：

@keyframes moveRight {
    0% { left: 0; }
    100% { left: 50px; }
}
img {
    position: relative;
    left: 0;
    animation: moveRight 2s;
}

在這個(gè)例子中，圖片將在2秒的時(shí)間內(nèi)從左側(cè)移動(dòng)到右側(cè)。