CSS中盒子的位置對于Web頁面的布局和美觀起著重要作用。盒子的位置可以通過CSS的定位屬性進行控制，主要有兩種定位方式：相對定位和絕對定位。

.box {
position: relative; /* 相對定位 */
}
.box1 {
position: absolute; /* 絕對定位 */
top: 50px;
left: 100px;
}

相對定位是相對元素自身的位置進行定位，如上面的樣例代碼，給一個盒子設置相對定位后，可以通過top、bottom、left、right屬性進行微調盒子的位置，這些屬性的值是相對于原本盒子所在位置的偏移量。

絕對定位是相對于父元素的定位進行的，因此需要先給父元素設置相對定位或絕對定位，也可以使用頁面的body或html元素作為參考對象。

.box {
position: relative;
}
.box1 {
position: absolute;
top: 50px;
left: 100px;
width: 200px;
height: 200px;
}
.box2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

上述代碼中，給.box1設置了絕對定位后，可以通過top和left屬性指定其在相對引用元素.box的位置，也可以使用right和bottom屬性。同時，.box2使用絕對定位并通過top、left、width、height設置占滿整個頁面。

除了這兩種定位方式，CSS還提供了fixed定位和sticky定位。fixed定位是相對于瀏覽器窗口進行定位，即使頁面滾動，元素也會一直停留在固定的位置。而sticky定位類似于fixed定位，但是只在滾動到一定位置時才固定，類似于固定在頁面的頂部或底部的導航菜單。

.nav {
position: sticky;
top: 0;
}

上述代碼中，.nav元素的定位方式是sticky，并且指定其top屬性為0，即在頁面滾動到該元素處時固定在頁面頂部。

CSS中盒子的定位是Web開發中非常基礎而且必要的一部分，良好地掌握定位技巧可以為頁面的設計和實現帶來便利和效率。