CSS中最常用的位置屬性有position、top、bottom、left以及right。這些屬性可以幫助我們控制HTML元素在頁(yè)面中的位置。

position屬性有五種取值：static、relative、absolute、fixed、sticky。其中，static是默認(rèn)值，表示元素的位置不受影響，當(dāng)指定其他的值時(shí)，就可以控制元素相對(duì)于頁(yè)面中其他元素的位置。

使用top、bottom、left以及right屬性可以精確控制元素的位置。例如，如果我們想要讓一個(gè)元素距離頁(yè)面頂部的距離為20像素，可以這樣寫：

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

同樣的，如果要讓元素距離頁(yè)面左側(cè)的距離為50像素，可以這樣寫：

.left{
position: relative;
left: 50px;
}

如果我們希望元素的位置不會(huì)受到頁(yè)面滾動(dòng)的影響，可以使用fixed屬性，例如：

.fixed{
position: fixed;
top: 20px;
}

sticky屬性則是相對(duì)新的屬性，它實(shí)現(xiàn)了一種很Cool的效果——當(dāng)元素滾動(dòng)到一定的位置時(shí)，會(huì)固定在那個(gè)位置，例如：

.sticky{
position: sticky;
top: 20px;
}

通過(guò)上面的例子，我們可以看到，CSS中的位置屬性可以幫助我們控制HTML元素的位置，而且非常靈活和強(qiáng)大。但是，我們?cè)谑褂眠@些屬性時(shí)，要遵循一些基本的規(guī)則，例如不要讓元素重疊、不要讓元素超出可視范圍等，這樣才能保證頁(yè)面的良好效果。