CSS中有很多種方式可以改變元素的位置，今天我們要討論的是塊元素的位置變動。塊元素默認是占滿父元素的橫向寬度，可以通過改變margin、padding和position屬性來改變塊元素的位置。

/* margin */
.box {
margin-top: 10px; /* 上邊距10像素 */
margin-left: 20px; /* 左邊距20像素 */
}
/* padding */
.box {
padding-top: 10px; /* 上內邊距10像素 */
padding-left: 20px; /* 左內邊距20像素 */
}
/* position */
.box {
position: relative; /* 定位方式為相對定位 */
top: 10px; /* 上偏移10像素 */
left: 20px; /* 左偏移20像素 */
}

這里需要注意的是，當我們使用position屬性來改變元素位置時，元素會變成一個相對定位元素，且相對于自身原來的位置進行移動。如果我們希望元素相對于父元素定位，可以在父元素上加上position: relative;屬性，并在子元素上使用position: absolute;屬性來進行絕對定位。

.parent {
position: relative;
}
.child {
position: absolute;
top: 10px;
left: 20px;
}

以上就是塊元素位置變動的幾種常見方式，希望可以幫助到大家。