為什麼需要定位

以下情況使用標準流或者浮動能實現嗎？

1. 某個元素可以自由的在一個盒子內移動位置，並且壓住其他盒子.
2. 當我們滾動視窗的時候，盒子是固定螢幕某個位置的。
   以上效果，標準流或浮動都無法快速實現，此時需要定位來實現。
   所以：
3. 浮動可以讓多個塊級盒子一行沒有縫隙排列顯示， 經常用於橫向排列盒子。
4. 定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置，並且可以壓住其他盒子。

定位

定位：將盒子定在某一個位置，所以定位也是在擺放盒子， 按照定位的方式移動盒子。
定位 = 定位模式 + 邊偏移 。
定位模式用於指定一個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。
邊偏移就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

靜態定位 static（瞭解）

靜態定位是元素的預設定位方式，無定位的意思。
語法：

選擇器 { position: static; }

 靜態定位按照標準流特性擺放位置，它沒有邊偏移
 靜態定位在佈局時很少用到

相對定位 relative（重要）

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

選擇器 { position: relative; }

相對定位的特點：（務必記住）

1. 它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
2. 原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它。
   因此，相對定位並沒有脫標。它最典型的應用是給絕對定位當爹的。。。

絕對定位 absolute（重要）

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

選擇器 { position: absolute; }

絕對定位的特點：（務必記住）

1. 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位（Document 文件）。
2. 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。
3. 絕對定位不再佔有原先的位置。（脫標）
   所以絕對定位是脫離標準流的。