定位

1. CSS 佈局的三種機制

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

CSS 提供了 3 種機制來設定盒子的擺放位置，分別是普通流、浮動和定位，其中：

1. 普通流（標準流）

2. 浮動

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

3. 定位

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

2. 為什麼使用定位

** 當我們滾動視窗的時候，盒子是固定螢幕某個位置的**

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

將盒子定在某一個位置 自由的漂浮在其他盒子(包括標準流和浮動)的上面

所以三種佈局機制的上下順序

標準流在最底層 (海底) ------- 浮動 的盒子 在 中間層 (海面) ------- 定位的盒子 在 最上層 （天空）

3. 定位詳解

定位也是用來佈局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移

3.1 邊偏移

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

在 CSS 中，通過 top、bottom、left 和 right 屬性定義元素的邊偏移：（方位名詞）

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

定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

3.2 定位模式 (position)

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

選擇器 { position: 屬性值; }

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

值	語義
static	靜態定位
relative	相對定位
absolute	絕對定位
fixed	固定定位

3.2.1 靜態定位(static) - 瞭解

• 靜態定位是元素的預設定位方式，無定位的意思。它相當於 border 裡面的none， 不要定位的時候用。
• 靜態定位 按照標準流特性擺放位置，它沒有邊偏移。
• 靜態定位在佈局時我們幾乎不用的

3.2.1 相對定位(relative) - 重要

• 相對定位是元素相對於它 原來在標準流中的位置 來說的。
  相對定位的特點：
• 相對於 自己原來在標準流中位置來移動的
• 原來在標準流的區域繼續佔有，後面的盒子仍然以標準流的方式對待它。

3.2.3 絕對定位(absolute) - 重要

絕對定位是元素以帶有定位的父級元素來移動位置

1. 完全脫標 —— 完全不佔位置；

2. 父元素沒有定位，則以瀏覽器為準定位（Document 文件）。

3. 父元素要有定位

   • 將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

絕對定位的特點：

• 絕對是以帶有定位的父級元素來移動位置 如果父級都沒有定位，則以瀏覽器文件為準移動位置
• 不保留原來的位置，完全是脫標的。

因為絕對定位的盒子是以帶有定位的父級元素來移動位置，所以要和父級搭配一起來使用。

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

3.2.4 固定定位(fixed) - 重要

固定定位是絕對定位的一種特殊形式： 如果說絕對定位是一個矩形 那麼 固定定位就類似於正方形

1. 完全脫標 —— 完全不佔位置；
2. 只認瀏覽器的可視視窗 —— 瀏覽器可視視窗 + 邊偏移屬性 來設定元素的位置；
   • 跟父元素沒有任何關係；單獨使用的
   • 不隨滾動條滾動。
     提示：IE 6 等低版本瀏覽器不支援固定定位。

5.1 絕對定位的盒子居中

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

在使用絕對定位時要想實現水平居中：

1. left: 50%;：讓盒子的左側移動到父級元素的水平中心位置；
2. margin-left: -100px;：讓盒子向左移動自身寬度的一半。

5.2 堆疊順序（z-index）

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

加了定位的盒子，預設後來者居上， 後面的盒子會壓住前面的盒子。

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

1. 屬性值：正整數、負整數或 0，預設值是 0，數值越大，盒子越靠上；
2. 如果屬性值相同，則按照書寫順序，後來居上；
3. 數字後面不能加單位。

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

5.3 定位改變display屬性

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

• 可以用inline-block 轉換為行內塊
• 可以用浮動 float 預設轉換為行內塊（類似，並不完全一樣，因為浮動是脫標的）
• 絕對定位和固定定位也和浮動類似， 預設轉換的特性 轉換為行內塊。

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

同時注意：

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

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

圓角矩形設定4個角

圓角矩形可以為4個角分別設定圓度， 但是是有順序的

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

• 如果4個角，數值相同

border-radius: 15px;

• 裡面數值不同，我們也可以按照簡寫的形式，具體格式如下:

border-radius: 左上角 右上角  右下角  左下角;

還是遵循的順時針。

6. 定位小結

定位模式	是否脫標占有位置	移動位置基準	模式轉換（行內塊）	使用情況
靜態static	不脫標，正常模式	正常模式	不能	幾乎不用
相對定位relative	不脫標，佔有位置	相對自身位置移動	不能	基本單獨使用
絕對定位absolute	完全脫標，不佔有位置	相對於定位父級移動位置	能	要和定位父級元素搭配使用
固定定位fixed	完全脫標，不佔有位置	相對於瀏覽器移動位置	能	單獨使用，不需要父級

注意：

1. 邊偏移需要和定位模式聯合使用，單獨使用無效；
2. top 和 bottom 不要同時使用；
3. left 和 right 不要同時使用。

8. 網頁佈局總結

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

1). 標準流

可以讓盒子上下排列 或者 左右排列的

2). 浮動

可以讓多個塊級元素一行顯示 或者 左右對齊盒子 浮動的盒子就是按照順序左右排列

3). 定位

定位最大的特點是有層疊的概念，就是可以讓多個盒子 前後 疊壓來顯示。 但是每個盒子需要測量數值。