在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：

css 選擇器 { position: 屬性值; } 定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。

定位模式決定元素的定位方式 ，它通過 CSS 的 position 屬性來設置，其值可以分為四個：

一、靜態定位(static)

• 靜態定位是元素的默認定位方式，無定位的意思。它相當於 border 裡面的none，靜態定位static，不要定位的時候用。
• 語法：

選擇器 { position: static; }

• 靜態定位 按照標準流特性擺放位置，它沒有邊偏移。
• 靜態定位在布局時我們幾乎不用的

二、相對定位(relative)

• 相對定位是元素在移動位置的時候，是相對於它自己原來的位置來說的（自戀型）。
• 語法：

選擇器 { position: relative; }

• 相對定位的特點：（務必記住）
• 1.它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
• 2.原來在標準流的位置繼續占有，後面的盒子仍然以標準流的方式對待它。

因此，相對定位並沒有脫標。它最典型的應用是給絕對定位當爹的。。。

• 效果圖：

三、絕對定位(absolute)

絕對定位的介紹

• 絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的（拼爹型）。
• 語法：

選擇器 { position: absolute; }

1. 完全脫標 —— 完全不占位置；
2. 父元素沒有定位，則以瀏覽器為準定位（Document 文檔）。

3.父元素要有定位

• 元素將依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

四、定位口訣 —— 子絕父相

弄清楚這個口訣，就明白了絕對定位和相對定位的使用場景。

這個「子絕父相」太重要了，是我們學習定位的口訣，是定位中最常用的一種方式這句話的意思是：子級是絕對定位的話，父級要用相對定位。

因為絕對定位的盒子是拼爹的，所以要和父級搭配一起來使用。

①子級絕對定位，不會占有位置，可以放到父盒子裡面的任何一個地方，不會影響其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子內顯示。

③父盒子布局時，需要占有位置，因此父親只能是相對定位。

這就是子絕父相的由來，所以相對定位經常用來作為絕對定位的父級。

總結： 因為父級需要占有位置，因此是相對定位， 子盒子不需要占有位置，則是絕對定位

當然，子絕父相不是永遠不變的，如果父元素不需要占有位置，子絕父絕也會遇到。

疑問：為什麼在布局時，子級元素使用絕對定位時，父級元素就要用相對定位呢？

觀察下圖，思考一下在布局時，左右兩個方向的箭頭圖片以及父級盒子的定位方式。

分析：

1. 方向箭頭疊加在其他圖片上方，應該使用絕對定位，因為絕對定位完全脫標，完全不占位置。
2. 父級盒子應該使用相對定位，因為相對定位不脫標，後續盒子仍然以標準流的方式對待它。

• 如果父級盒子也使用絕對定位，會完全脫標，那麼下方的廣告盒子會上移，這顯然不是我們想要的。

結論：父級要占有位置，子級要任意擺放，這就是子絕父相的由來。

五、固定定位(fixed)

• 固定定位是元素固定於瀏覽器可視區的位置。（認死理型） 主要使用場景： 可以在瀏覽器頁面滾動時元素的位置不會改變。
• 語法：

選擇器 { position: fixed; }

• 固定定位的特點：（務必記住）：

1.以瀏覽器的可視窗口為參照點移動元素。

• 跟父元素沒有任何關係
• 不隨滾動條滾動。

2.固定定位不在占有原先的位置。

• 固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。（認死理型）
• 完全脫標—— 完全不占位置；
• 只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設置元素的位置；
• 跟父元素沒有任何關係；單獨使用的
• 不隨滾動條滾動。

固定定位舉例：

提示：IE 6 等低版本瀏覽器不支持固定定位。

六、粘性定位(sticky)

• 粘性定位可以被認為是相對定位和固定定位的混合。 Sticky 粘性的
• 語法：

``` 選擇器 { position: sticky; top: 10px; }

```

• 粘性定位的特點：

1.以瀏覽器的可視窗口為參照點移動元素（固定定位特點）

2.粘性定位占有原先的位置（相對定位特點）

3.必須添加 top 、left、right、bottom 其中一個才有效

跟頁面滾動搭配使用。 兼容性較差，IE 不支持。

總結

• 一定記住 相對定位、固定定位、絕對定位 兩個大的特點： 1. 是否占有位置（脫標否） 2. 以誰為基準點移動位置。
• 學習定位重點學會子絕父相。
• 注意：
• 邊偏移需要和定位模式聯合使用，單獨使用無效；
• top 和 bottom 不要同時使用；
• left 和 right 不要同時使用。