CSS的定位

1. 定位的必要性

• 浮動可以讓多個塊級盒子一行沒有縫隙地排列顯示，經常用於橫向排列盒子
• 定位則是可以讓盒子自由地在某個盒子內移動位置或者固定在螢幕中的某個位置，並且可以壓住其它盒子

2. 定位的組成

定位=定位模式+邊偏移

定位模式：用於指定一個元素在文件中的定位方式，通過position屬性設定。

邊偏移：決定了該元素的最終位置。

3. 定位模式

3.1 靜態定位static

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

選擇器 {
    position: static;
}

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

3.2 相對定位relative

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

選擇器 {
    position: relative;
}
 

特點：

1. 移動位置的時候參照點是自己原來的位置
2. 不脫標，繼續保留原來的位置，即原來在標準流的位置繼續佔有

3.3 絕對定位absolute

元素在移動位置的時候，是相對於它父級元素來說的。

選擇器 {
    position: absolute;
}

特點：

1. 如果沒有父級元素或父級元素沒有定位，則以瀏覽器為準定位
2. 如果父級元素有定位（相對、絕對、固定），則以最近一級有定位的父級元素作為參考點移動
3. 脫標，不再佔有原來的位置

絕對定位小技巧：絕對定位的盒子居中

加了絕對定位的盒子不能通過margin: 0 auto設定水平居中，解決方案如下。

1. 讓絕對定位的盒子left: 50%，走到父級盒子的一半位置

2. 讓固定定位的盒子margin-left: 自身寬度的一半距離

3.4 固定定位fixed

元素固定於瀏覽器可視區的位置，可以在瀏覽器頁面滾動時元素的位置不會改變。

選擇器 {
    position: fixed;
}

特點：

1. 以瀏覽器的可視視窗作為參考點移動
2. 跟父元素沒有任何關係
3. 不隨滾動條滾動
4. 脫標，不再佔有原來的位置

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

1. 讓固定定位的盒子left: 50%，走到瀏覽器可視區的一半位置

2. 讓固定定位的盒子margin-left: 版心寬度的一半距離

3.5 粘性定位sticky

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

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

特點：

1. 以瀏覽器的可是視窗作為參照點移動（固定定位特點）
2. 不脫標，佔有原來的位置（相對定位特點）
3. 必須新增top、left、right、bottom其中一個才有效
4. 跟頁面滾動搭配使用，相容性較差，ie不支援

4. “子絕父相”的由來

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

• 子級絕對定位，不佔有位置，可以放到父級盒子裡的任何一個地方，不會影響其它兄弟盒子
• 父級盒子需要新增定位限制子盒子，使得子盒子只能在父級盒子內顯示
• 父盒子佈局時，需要佔有位置，因此父級盒子只能是相對定位

相對定位經常用來作為絕對定位的父級。

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

注：若父級盒子不需要佔有位置，“子絕父絕”也會遇到。

5. 定位模式總結

6. 定位疊放次序z-index

控制盒子的前後次序（z軸）。

選擇器 {
    z-index: 1;
}

• 數值可以是正整數、負數或0，預設值auto，數值越大，盒子越靠上
• 如果屬性值相同，則按照書寫順序，後來者居上
• 數字後面不能加單位
• 只有定位的盒子才有這個屬性

7. 定位的拓展

7.1 定位的特殊特性

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

1. 行內元素新增絕對定位或固定定位，可以直接設定高度和寬度
2. 塊級元素新增絕對定位或固定定位，如果不指定width/height，預設大小是內容的大小

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

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

7.3 絕對定位、固定定位會完全壓住盒子

• 浮動元素只會壓住它下面標準流的盒子，但是不會壓住它下面標準流盒子裡的文字/圖片。（原因：浮動產生的最初目的是為了左文字環繞效果的，文字會圍繞浮動元素。）
• 絕對定位、固定定位會壓住它下面標準流裡的所有內容

8. 網頁佈局總結

一個完整的網頁，是標準流、浮動、定位一起完成佈局的，每個都有自己的專門用法。

1. 標準流

   可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流佈局。

2. 浮動

   可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動佈局。

3. 定位

   定位最大的特點就是有層疊的概念，就是可以讓多個盒子前後疊壓來顯示。如果元素自由在某個盒子內移動就用定位佈局。