為什麼需要定位？

1.某個元素可以自由的在一個盒子內移動位置，並且壓住其他盒子。

2.當我們滾動視窗的時候，盒子是固定螢幕某個位置的。

浮動可以讓多個塊級盒子一行沒有縫隙排列顯示，經常用於橫向排列盒子。

定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置，並且可以壓住其他盒子。

定位組成

定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。

定位 = 定位模式 + 邊偏移

1.定位模式

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

值　　　　　　語義

static　　　　 靜態定位

relative　　　 相對定位

absolute　　 絕對定位

fixed　　　　 固定定位

2.邊偏移

邊偏移就是定位的盒子移動到最終位置。有top、bottom、left和right 4個屬性。

靜態定位static

是元素預設定位方式，無定位的意思。

語法: 選擇器 { position: static; }

靜態定位按照標準流特性擺放位置，它沒有邊偏移

相對定位 relative(重要！！！)

相對定位是元素在移動位置的時候，是相對於它原來的位置來說的(自戀嗷)。

語法：選擇器 { position: relative; }

相對定位的特點：

1.它是相對於自己原來的位置來移動的(移動位置的時候參照點是自己原來的位置)。

2.原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它。（不脫標，繼續保留原來位置）

絕對定位 absolute(重要！！！)

絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的。

語法：選擇器 { position: absolute }

絕對定位的特點：

1.如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位(Document文件)。

2.如果祖先元素有定位(相對、絕對、固定定位)，則以最近一級的有定位祖先元素為參考點移動位置。

3.絕對定位不再佔有原先的位置。(脫標)

子絕父相

子級是絕對定位的話，父級要用相對定位。

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

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

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

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

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

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

固定定位 fixed(重要)

固定定位是元素固定於瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。

語法：選擇器 { position: fixed; }

固定定位的特點：

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

·跟父元素沒有任何關係

·不隨滾動條滾動。

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

固定定位也是脫標的，其實固定定位也可以看作是一種特殊的絕對定位。

粘性定位 sticky

粘性定位可以被認為是相對定位和固定定位的混合。

語法：{ position: sticky; }

粘性定位的特點：

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

2.粘性定位佔有原先的位置(相對定位特點)

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

定位的總結

定位疊放次序 z-index

在使用定位佈局時，可能會出現盒子重疊的情況。此時，可以使用z-index來控制盒子的前後次序(z軸)

語法： 選擇器 { z-index: 1 }

·數值可以是正整數、負整數或0，預設是auto，數值越大，盒子越靠上

·如果屬性值相同，則按照書寫順序，後來居上

·數字後面不能加單位

·只有定位的盒子才有z-index屬性