CSS是網頁設計中不可或缺的一部分，可以實現各種炫酷的效果。其中，移動圖片是常見的需求之一。但有時候我們想要圖片移動，但是又不想改變它的位置，該怎么辦呢？下面就讓我們來學習一下如何在不改變圖片位置的情況下移動它。

.container {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(100px, 0);
}
100% {
transform: translate(0, 0);
}
}
.image:hover {
animation: move 2s ease-in-out infinite;
}

首先，我們需要給圖片的容器設置一個position: relative，這可以讓圖片容器成為定位上下文。然后，把圖片的position設置為absolute，這會讓圖片脫離文檔流，并讓它成為容器的子元素。接下來，我們用transform將圖片定位到容器的中心。

接著，我們用@keyframes定義了一個名為move的動畫，讓圖片在橫向移動100像素，并在原地“踏步”。最后，我們使用:hover選擇器來觸發動畫。

這樣，我們就成功地實現了圖片的位置不變移動啦！