在CSS中，盒子模型是頁面布局中不可或缺的一部分。除了盒子的大小和樣式外，盒子的位置也非常重要。在CSS中，有兩種設(shè)置盒子位置的方法：絕對定位和相對定位。在本文中，我們將重點(diǎn)介紹CSS盒子的相對位置。

.box {
position: relative;
left: 20px;
top: 30px;
}

首先，我們需要為盒子設(shè)置相對定位。這可以通過設(shè)置position屬性為relative來實(shí)現(xiàn)。相對定位可以讓盒子相對于它原本所在的位置進(jìn)行移動，而不會對其他元素產(chǎn)生影響。

一旦我們設(shè)置了盒子的相對定位，我們就可以使用left和top屬性來控制盒子的位置。left屬性定義盒子左側(cè)的距離，top屬性定義盒子上方的距離。如果我們將left設(shè)置為20px，top設(shè)置為30px，盒子將向右移動20像素，向下移動30像素。

.box {
position: relative;
right: 10px;
bottom: 20px;
}

與left和top類似，相對定位還提供了right和bottom屬性。這兩個屬性可以定義盒子右側(cè)的距離和下方的距離。如果我們將right設(shè)置為10px，bottom設(shè)置為20px，盒子將向左移動10像素，向上移動20像素。

需要注意的是，使用相對定位時(shí)，盒子仍然保留其原來的位置。因此，增加left或top的值可能會導(dǎo)致盒子超出父元素的范圍。此時(shí)，我們可以使用負(fù)數(shù)值來調(diào)整盒子的位置，將其向父元素的內(nèi)部移動。

總之，相對定位是一種非常有用的方式來控制盒子的位置。它不會影響其他元素，可以讓我們更加靈活地進(jìn)行頁面布局。