1、CSS布局的三種機制

網頁布局的核心——就是用CSS來擺放盒子位置。

CSS提供部分了3種機制來設置盒子的擺放位置：

普通流（標準流）

浮動（讓盒子從普通流中浮起來 —— 讓多個盒子(div)水平排列成一行）

定位（將盒子定在某一個位置 自由的漂浮在其他盒子的上面 —— CSS 離不開定位，特別是后面的 js 特效）

2，為什么使用定位？

我們先來看一個效果，同時思考一下用標準流或浮動能否實現類似的效果？

小黃色塊在圖片上移動，吸引用戶的眼球。

2.當我們滾動窗口的時候，盒子是固定屏幕某個位置的。

結論：要實現以上效果，標準流或浮動都無法快速實現

3. 定位詳解

定位也是用來布局的，它有兩部分組成：定位 = 定位模式 + 邊偏移

3.1邊偏移

簡單說， 我們定位的盒子，是通過邊偏移來移動位置的。

在 CSS 中，通過 top、bottom、left 和 right 屬性定義元素的邊偏移：（方位名詞），定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

3.2定位模式 (position)

在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：

選擇器 { position: 屬性值; }

定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。

|值| 語義 |

|static|靜態定位|

| relative | 相對定位 |

|absolute | 絕對定位 |

|fixed|固定定位|

3.2.1 靜態定位(static) - 了解

靜態定位是元素的默認定位方式，無定位的意思。它相當于 border 里面的none， 不要定位的時候用。

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

靜態定位在布局時我們幾乎不用的

3.2.1 相對定位(relative) - 重要

相對定位是元素相對于它 原來在標準流中的位置 來說的。（自戀型）

效果圖：

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

相對于 自己原來在標準流中位置來移動的

原來在標準流的區域繼續占有，后面的盒子仍然以標準流的方式對待它

- 3.2.3 絕對定位(absolute) - 重要

絕對定位是元素以帶有定位的父級元素來移動位置 （拼爹型）

完全脫標 —— 完全不占位置；

父元素沒有定位，則以瀏覽器為準定位（Document 文檔）

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

絕對是以帶有定位的父級元素來移動位置 （拼爹型） 如果父級都沒有定位，則以瀏覽器文檔為準移動位置

不保留原來的位置，完全是脫標的。

因為絕對定位的盒子是拼爹的，所以要和父級搭配一起來使用。

定位口訣 —— 子絕父相

剛才咱們說過，絕對定位，要和帶有定位的父級搭配使用，那么父級要用什么定位呢？

子絕父相 —— 子級是絕對定位，父級要用相對定位。

子絕父相是使用絕對定位的口訣，要牢牢記住！

3.2.4 固定定位(fixed) - 重要

固定定位是絕對定位的一種特殊形式： （認死理型） 如果說絕對定位是一個矩形 那么 固定定位就類似于正方形

完全脫標 —— 完全不占位置；

只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設置元素的位置；

跟父元素沒有任何關系；單獨使用的

不隨滾動條滾動。

4. 定位(position)的擴展

4.1 絕對定位的盒子居中

注意：絕對定位/固定定位的盒子不能通過設置 margin: auto 設置水平居中。

要這樣使用：

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

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

4.2 堆疊順序（z-index）

在使用定位布局時，可能會出現盒子重疊的情況。

加了定位的盒子，默認后來者居上， 后面的盒子會壓住前面的盒子。

應用 z-index 層疊等級屬性可以調整盒子的堆疊順序。

z-index 的特性如下：

屬性值：正整數、負整數或 0，默認值是 0，數值越大，盒子越靠上；

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

數字后面不能加單位。

注意：z-index 只能應用于相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效

4.3 定位改變display屬性

前面我們講過， display 是 顯示模式， 可以改變顯示模式有以下方式:

可以用inline-block 轉換為行內塊

可以用浮動 float 默認轉換為行內塊（類似，并不完全一樣，因為浮動是脫標的）

絕對定位和固定定位也和浮動類似， 默認轉換的特性 轉換為行內塊。

所以說， 一個行內的盒子，如果加了浮動、固定定位和絕對定位，不用轉換，就可以給這個盒子直接設置寬度和高度等。

同時注意：

浮動元素、絕對定位(固定定位）元素的都不會觸發外邊距合并的問題。 （我們以前是用padding border overflow解決的）

也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合并的問題了。