在網(wǎng)頁設(shè)計中，我們經(jīng)常需要對盒子進行定位。例如，我們要讓一個文本框浮在頁面的中央位置或者需要讓兩個盒子之間有一定的距離，這時候我們就需要使用CSS盒子定位技術(shù)。

#box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

CSS盒子定位技術(shù)主要包括相對定位、絕對定位、固定定位和粘性定位。其中相對定位既不會改變盒子原來占據(jù)的空間，又可以通過 top、bottom、left 和 right 等屬性相對于元素原本的位置進行調(diào)整。

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

絕對定位則是將元素從文檔流中脫離出來，不再占據(jù)原來的位置。通過設(shè)置元素的 position 屬性為 absolute ，然后再通過 top、bottom、left 和 right 等屬性進行精確定位。

.box{
position: absolute;
left: 0;
top: 0;
}

固定定位與絕對定位類似，但它是相對于瀏覽器窗口的位置而不是相對于其父元素的位置進行定位。通過設(shè)置元素的 position 屬性為 fixed，然后再通過 top、bottom、left 和 right 等屬性進行精確定位。

.box{
position: fixed;
top: 0;
left: 0;
}

最后，粘性定位主要針對一些需要在滾動過程中固定在某個位置的元素，例如導航欄。通過設(shè)置元素的 position 屬性為 sticky 以及 top、bottom、left 和 right 等屬性進行定位。

nav{
position: sticky;
top: 0;
}

通過使用上述的四種定位方式可以讓頁面的布局更加靈活和多樣化。