在網(wǎng)頁設(shè)計中，

<div>

元素是非常常見的標簽，而其中最基本的操作就是通過CSS控制盒子的位置，這不僅僅是為了美觀，還可以實現(xiàn)更多的交互效果。

首先，我們需要明確一點：CSS屬性可以分為“外部樣式”和“內(nèi)部樣式”兩種，而位置的控制正是實現(xiàn)“外部樣式”的功能。

.box {
position: absolute; /* 相對于父元素定位 */
left: 100px; /* 相對于左側(cè)移動100px */
top: 50px; /* 相對于頂部移動50px */
}

如上述代碼所示，

.box

元素通過設(shè)置

position

屬性為“絕對定位”，從而實現(xiàn)了其位置的自由控制。而

left

和

top

屬性則實現(xiàn)了其相對于文檔的位置移動。

此外，還有其他的定位方式：

.relative {
position: relative; /* 相對于自身定位 */
left: 100px; /* 相對于左側(cè)移動100px */
top: 50px; /* 相對于頂部移動50px */
}
.fixed {
position: fixed; /* 相對于瀏覽器窗口定位 */
left: 100px; /* 相對于左側(cè)移動100px */
top: 50px; /* 相對于頂部移動50px */
}

其中，

relative

和

fixed

方式也都是實現(xiàn)盒子移動和定位的有效方式，不同之處在于它們所“相對”的定位對象的不同。當然，在不同場景下，它們也可以混合使用，以達到更加復(fù)雜的設(shè)計效果。