早期網頁設計時圖片一般只是靜態展示，通過CSS的屬性和布局自然呈現。但是，現在隨著Web2.0時代的到來，更多創意的頁面效果得到運用，圖片也要Quartet移動了。

CSS中圖片的移動使用的是“position”屬性。它有幾個屬性值需要了解： 1. static：默認值，元素使用正常文檔流定位。 2. relative：相對定位，元素相對自己本來的位置進行移動。這時可以使用“top”“bottom”“left”“right”這幾個屬性進行定位。 3. absolute：絕對定位，元素相對于離它最近的已定位祖先元素移動，如沒有祖先元素，則相對于body移動，同樣可以使用“top”“bottom”“left”“right”屬性進行定位。 4. fixed：固定定位，元素會相對于視口進行定位，即使頁面滾動也不會改變位置。

使用相對定位移動圖片的代碼實例如下：

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

使用絕對定位移動圖片的代碼實例如下：

.parent{
position: relative;
}
.child{
position: absolute;
left: 50px;
top: 30px;
}

需要注意的是，絕對定位和相對定位會導致元素脫離文檔流，可能會影響其他元素的位置，因此需要謹慎使用。如想實現浮動的效果，可以使用“float”屬性。

在使用位置屬性移動圖片時，可以結合鼠標事件和CSS動畫，實現更加生動的交互效果。例如，當鼠標懸浮在圖片上時，圖片從上往下掉落；或者當鼠標點擊圖片時，圖片氣泡狀飛出。既能豐富用戶體驗，又能讓頁面更具有趣味性。