CSS的定位

CSS的定位

1. 定位的必要性

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

2. 定位的組成

定位=定位模式+邊偏移

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

屬性值	說明
static	靜態定位
relative	相對定位
absolute	絕對定位
fixed	固定定位

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

邊偏移屬性	示例	描述
top	top: 10px	頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom	bottom: 10px	底部偏移量，定義元素相對於其父元素下邊線的距離
left	left: 10px	左側偏移量，定義元素相對於其父元素左邊線的距離
right	right: 10px	右側偏移量，定義元素相對於其父元素右邊線的距離

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. 定位模式總結

定位模式	是否脫標	移動位置	是否經常使用
static 靜態	否	不能使用邊偏移	不多
relative 相對	否	相對於自身位置移動	經常使用
absolute 絕對	是	帶有定位的父級盒子	經常使用
fixed 固定	是	瀏覽器可視區	經常使用
sticky 粘性	否	瀏覽器可視區	當前階段少

6. 定位疊放次序z-index

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

選擇器 {
    z-index: 1;
}

• 數值能夠是正整數、負數或0，默認值auto，數值越大，盒子越靠上
• 若是屬性值相同，則按照書寫順序，後來者居上
• 數字後面不能加單位
• 只有定位的盒子纔有這個屬性

7. 定位的拓展

7.1 定位的特殊特性

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

1. 行內元素添加絕對定位或固定定位，能夠直接設置高度和寬度
2. 塊級元素添加絕對定位或固定定位，若是不指定width/height，默認大小是內容的大小

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

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

7.3 絕對定位、固定定位會徹底壓住盒子

• 浮動元素只會壓住它下面標準流的盒子，可是不會壓住它下面標準流盒子裏的文字/圖片。（緣由：浮動產生的最初目的是爲了左文字環繞效果的，文字會圍繞浮動元素。）
• 絕對定位、固定定位會壓住它下面標準流裏的全部內容

8. 網頁佈局總結

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

1. 標準流

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

2. 浮動

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

3. 定位

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