1 定位組成

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

　　定位 = 定位模式 + 邊偏移 。

　　定位模式用於指定一個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。

　1.1 定位模式

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

　1.2 邊偏移

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

2 靜態定位 static

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

選擇器 { position: static; }

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

　　靜態定位在佈局時很少用到。

3 相對定位 relative

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

選擇器 { position: relative; }

　　相對定位的特點：

　　① 它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。

　　② 原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它。

4 絕對定位 absolute

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

選擇器 { position: absolute; }

　　絕對定位的特點：

　　① 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位（Document 文件）。

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

　　③ 絕對定位不再佔有原先的位置。（脫標） 所以絕對定位是脫離標準流的。

5 子絕父相

　　這就是子絕父相的由來，所以相對定位經常用來作為絕對定位的父級。 總結： 因為父級需要佔有位置，因此是相對定位，子盒子不需要佔有位置，則是絕對定位。　　

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

6 固定定位 fixed

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

選擇器 { position: fixed; }

　　固定定位的特點：

　　① 以瀏覽器的可視視窗為參照點移動元素。跟父元素沒有任何關係，不隨滾動條滾動。

　　② 固定定位不在佔有原先的位置。 固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。

　　固定定位小技巧： 固定在版心右側位置。

　　小演算法：① 讓固定定位的盒子 left: 50%. 走到瀏覽器可視區（也可以看做版心） 的一半位置。

　　　　　　② 讓固定定位的盒子 margin-left: 版心寬度的一半距離。多走版心寬度的一半位置就可以讓固定定位的盒子貼著版心右側對齊了。

7 定位的總結

8 定位疊放次序 z-index

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

選擇器 { z-index: 1; }

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

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

　　③ 數字後面不能加單位　　

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

9 定位的拓展

　9.1 絕對定位的盒子居中

　　加了絕對定位的盒子不能通過 margin:0 auto 水平居中，但是可以通過以下計算方法實現水平和垂直居中。

　　① left: 50%;：讓盒子的左側移動到父級元素的水平中心位置。

　　② margin-left: -100px;：讓盒子向左移動自身寬度的一半。

　9.2 定位特殊特性

　　絕對定位和固定定位也和浮動類似。

　　① 行內元素新增絕對或者固定定位，可以直接設定高度和寬度。

　　② 塊級元素新增絕對或者固定定位，如果不給寬度或者高度，預設大小是內容的大小。

　9.3 脫標的盒子不會觸發外邊距塌陷

　　浮動元素、絕對定位(固定定位）元素的都不會觸發外邊距合併的問題。

　9.4 絕對定位（固定定位）會完全壓住盒子

　　浮動元素不同，只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子裡面的文字。

　　① 但是絕對定位（固定定位） 會壓住下面標準流所有的內容。

　　② 浮動之所以不會壓住文字，因為浮動產生的目的最初是為了做文字環繞效果的。 文字會圍繞浮動元素。