CSS 的 position 屬性用於指定一個元素在文檔中的定位方式。它有五個值：static、relative、absolute、fixed 和 sticky。

• static 是默認值，元素使用正常的佈局行為，即元素在文檔常規流中當前的佈局位置。
• relative 元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置。
• absolute 元素會被移出正常文檔流，且不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。
• fixed 元素會被移出正常文檔流，且不為元素預留空間，而是通過相對於視窗窗口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。
• sticky 元素在跨越特定閾值前為relative，之後為fixed，閾值是指基於 top、 right 、 bottom 或 left 的值。因此要使用sticky必須加上 top 、 right 、 bottom 或 left 四個屬性其中之一來指定閾值。

下面用一些簡單的HTML代碼舉例說明不同定位值的效果:

<!-- 相對定位relative -->
<div style="position: relative; top: 20px; left: 20px;background: red;">
  此元素相對定位了20px
</div>

<!-- 絕對定位absolute -->  
<div style="position: absolute; top: 40px; right: 0;background: blue;">
  此元素絕對定位到了右上角 
</div>

<!-- 固定定位fixed -->
<div style="position: fixed; bottom: 20px; right: 0;background: green;">
  此元素固定在了右下角
</div>

<!-- 正常定位元素 -->
<div>
  normal div
</div>

這樣red、blue、green三個div就可以通過定位自由移動，而不影響normal div的位置。

當然，實際使用時可配合JavaScript動態修改定位屬性，以及z-index層叠等更多功能，這只是簡單演示定位的基本用法。

而sticky的用法則是如下:

<!-- 粘性定位sticky -->
<div style="position: sticky; top: 0; background: yellow;">
  此元素粘性定位在頂部
</div>

<!-- 滾動内容 -->
<p>...</p> 
<p>...</p>
<p>...</p>

<!-- 正常定位元素 -->  
<div>
  normal div
</div>

以上HTML表示sticky元素滾動到頂部時會固定在該位置，當滾動超過它的位置時會按正常流排列。

所以這個黃色div在最開始會在頁面頂部固定，當滾動超過它時會按正常位置移動，當再次滾動到頂部時會重新固定。

這樣可以實現一些類似於頭部導航的效果。結合JavaScript計算元素位置，可以實現更靈活的粘性定位。

接著來說一些其他的定位屬性:

• top - 定義垂直方向上與其包含塊上邊界的偏移量。

• bottom - 定義垂直方向上與其包含塊下邊界的偏移量。

• left - 定義水平方向上與其包含塊左邊界的偏移量。

• right - 定義水平方向上與其包含塊右邊界的偏移量。

• z-index - 設置元素的堆疊順序。

例如:

position: absolute;
top: 100px; 
left: 100px;
z-index: 1;

這會將元素定位到距離包含塊上緣和左緣都100px的位置，同時z-index設為1使其高於堆疊順序。

而z-index屬性的預設值是auto，當設定為auto時，元素將自動根據源代碼的堆疊順序確定層疊關係，後出現的元素默認高於先出現的元素。

如果要改變元素的預設堆疊順序，可以給z-index設定數值:

• z-index: 0 - 將元素置於堆疊順序的底層
• z-index: 正整數 - 將元素置於較高的層疊順序中
• z-index: 負整數 - 將元素置於較低的層疊順序中

數值越大，元素在堆疊順序中的位置越高。

需要注意的是:

• z-index只能在定位元素(position值不為static的元素)上奏效
• 如果兩個定位元素的z-index值一樣，它們的堆疊順序遵循源代碼順序
• z-index僅在它的包含塊內有效

正確使用z-index可以控制複雜頁面中的元素疊加順序，創建多層次的視覺效果。

除此以外，配合定位的還有:

• clip - 剪裁定位元素可顯示的區域

• cursor - 指定鼠標移到定位元素上的鼠標樣式。

這些屬性可以組合豐富的效果，建立動態的網頁定位功能。但要注意盡量不要過度依賴定位，以免破壞正常文檔流導致問題。