1.爲什麼需要定位？
標準流和浮動 ， 難以實現一下情況
- 某個元素可以自由的在一個盒子內移動位置，並且壓住其他盒子。
-
當我們滾動窗口時嗎，盒子是固定屏幕某個位置的
2. 定位組成
定位 = 定位模式 + 邊偏移
定位模式通過CSS的position屬性來設定，定位模式有四個值：
| 值 | 語義 |
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
邊偏移，有top，bottom，left，right四個屬性。
| 邊偏移屬性 | 實例 | 描述 |
|---|---|---|
| top | top : 80px | 頂部偏移量，定義元素相對於其父元素上邊線的距離。 |
| bottom | bottom : 80px | 底部偏移量，定義元素相對於其父元素下邊線的距離。 |
| left | left : 80px | 左側偏移量，定義元素相對於其父元素左邊線的距離。 |
| right | right : 80px | 右側偏移量，定義元素相對於其父元素右邊線的距離。 |
3. 靜態定位
- 靜態定位是元素默認定位方式，無定位的意思。
- 靜態定位按照標準流拜訪位置，它沒有邊偏移。
- 靜態定位在佈局時很少用到。
4. 相對定位
- 相對定位是元素在移動位置的時候，是相對於它原來的位置來說的。（自戀型）
- 原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它（不脫標，繼續保留原來位置）
- 最典型的應用是給絕對定位當爹（父元素）
5. 絕對定位
- 絕對定位元素在移動的時候，是相對於它的祖先元素來說的（拼爹型）
- 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器爲準定位
- 如果祖先元素有定位（相對、絕對、固定），則以最近一級有定位的祖先元素爲參考點移動位置。
- 絕對定位不再佔有原先的位置（脫標）
絕對定位的盒子居中算法
絕對定位的盒子無法通過margin:0 auto;實現水平居中，可以通過以下方式實現水平，垂直居中。
<style>
.box {
position: absolute;
/* 1. left 走 50% 父容器寬度的一半 */
left: 50%;
/* 2. margin 負值 往左邊走 自己盒子寬度的一半 */
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
/* margin: auto; */
}
</style>
6.子絕父相
子級是絕對定位的話，父級要用相對定位。
-
子級絕對定位，不佔有位置，可以放到父盒子的任何一個地方，不會影響替他兄弟盒子。
-
父盒子需要加定位，限制子盒子在父盒子內顯示。
-
父盒子佈局時，需要佔有原先位置，因此父盒子只能是相對定位
7. 固定定位
固定定位是元素固定於瀏覽器可視區的位置。主要使用場景： 在瀏覽器頁面滾動時，元素的位置不變。
- 以瀏覽器的可視窗口爲參照點移動標準。
- 和父元素沒有任何關係
- 不隨滾動條滾動
- 固定定位不再佔有原先的位置（脫標）
其實固定定位也可以看作一種特殊的絕對定位
8. 定位的特殊性
- 行內元素添加絕對或者固定定位，可以直接設置高度和寬度。
- 塊級元素添加絕對定位或者固定定位，如果不給高度或寬度，默認大小是內容的大小。
- 浮動元素、絕對定位（固定定位），即脫標的元素不會觸發外邊距合併問題。
- 絕對定位和固定定位，會完全壓住下面標準流的所有內容，浮動元素不同，只會壓住它下面的標準流盒子，但是不會壓住下面標準流盒子裏的文字和圖片。浮動之所以不會壓住文字，是因爲浮動產生的目的，最初是爲了做文字環繞效果，文字會圍繞浮動元素。