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

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

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

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

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

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

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

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