前端成神之路-定位

定位(position)

目标

• 了解

• 能說出為什麼要用定位
• 能說出定位的4種分類
• 能說出四種定位的各自特點
• 能說出我們為什麼常用子絕父相布局

• 應用

• 能寫出淘寶輪播圖布局

1. CSS 布局的三種機制

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

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

1. 普通流（标準流）
2. 浮動

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

1. 定位

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

2. 為什麼使用定位

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

1. 小黃色塊在圖檔上移動，吸引使用者的眼球。

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

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

pink老師一句話說出定位：

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

是以，我們腦海應該有三種布局機制的上下順序

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

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. 父元素要有定位

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

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

• 絕對是以帶有定位的父級元素來移動位置 （拼爹型） 如果父級都沒有定位，則以浏覽器文檔為準移動位置
• 不保留原來的位置，完全是脫标的。

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

定位口訣 —— 子絕父相

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

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

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

疑問：為什麼在布局時，子級元素使用絕對定位時，父級元素就要用相對定位呢？

觀察下圖，思考一下在布局時，左右兩個方向的箭頭圖檔以及父級盒子的定位方式。

分析：

1. 方向箭頭疊加在其他圖檔上方，應該使用絕對定位，因為絕對定位完全脫标，完全不占位置。
2. 父級盒子應該使用相對定位，因為相對定位不脫标，後續盒子仍然以标準流的方式對待它。

• 如果父級盒子也使用絕對定位，會完全脫标，那麼下方的廣告盒子會上移，這顯然不是我們想要的。

結論：父級要占有位置，子級要任意擺放，這就是子絕父相的由來。

3.2.4 固定定位(fixed) - 重要

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

1. 完全脫标—— 完全不占位置；
2. 隻認浏覽器的可視視窗——​

   ​浏覽器可視視窗 + 邊偏移屬性​

   ​ 來設定元素的位置；

• 跟父元素沒有任何關系；單獨使用的
• 不随滾動條滾動。

案例演練：固定定位案例。

提示：IE 6 等低版本浏覽器不支援固定定位。

4. 定位(position)的案例

4.1 哈根達斯

案例截圖：

哈根達斯分析

1. 一個大的​

   ​div​

   ​​ 中包含​

   ​3​

   ​ 張圖檔；
2. 大的​

   ​div​

   ​ 水準居中；
3. ​

   ​2​

   ​ 張小圖檔重疊在廣告圖檔上方 —— 脫标，不占位置，需要使用絕對定位；
4. ​

   ​2​

   ​ 張小圖檔分别顯示在左上角和右下角—— 需要使用邊偏移确定準确位置。

案例小結：

1. 子絕父相——子元素使用絕對定位，父元素使用相對定位；
2. 與浮動的對比：

• 絕對定位：脫标，利用邊偏移指定準确位置；
• 浮動：脫标，不能指定準确位置，讓多個塊級元素在一行顯示。

課堂練習：模拟老師的随堂案例完成哈根達斯案例（5 分鐘）。

4.2 仿新浪頭部和廣告

新浪案例分析

1. 頂部圖檔固定在浏覽器可視視窗頂部，不會随視窗一起滾動；
2. 左右兩側的廣告圖檔固定在浏覽器可視視窗的左右兩側，不會随視窗一起滾動；
3. 注意：底部的内容圖檔初始顯示在頂部圖檔的下方，如何解決？

步驟 1 —— 頂部圖檔和底部内容

.top {
    /* 注意：使用固定定位時，如果盒子中沒有内容，需要指定寬度 */
    width: 100%;
    height: 44px;
    background: url(images/top.png) no-repeat top center;
    position: fixed;
    left: 0px;
    top: 0px;
}

.box {
    width: 1002px;
    /* 頂部的 44px 的 margin 可以讓 box 顯示在頂部圖檔下方 */
    margin: 44px auto;
}      

注意：

1. 在使用固定定位時，如果盒子中沒有内容，需要指定寬度
2. 設定底部内容圖檔的頂部 ​

   ​margin​

   ​，可以讓底部盒子初始顯示在頂部圖檔的下方。

步驟 2 —— 左右兩側廣告

.ad-left,
.ad-right {
    position: fixed;
    top: 100px;
}

.ad-left {
    left: 0px;
}

.ad-right {
    right: 0px;
}      

注意：不要同時使用 ​

​left​

​​ 和 ​

​right​

​ 和邊偏移屬性。

案例小結：

1. 固定定位的應用場景：固定在浏覽器可視視窗某個位置的布局；
2. 在使用固定和絕對定位時，如果盒子中沒有内容，需要指定寬度（稍後就講）。

課堂練習：模拟老師的随堂案例完成仿新浪頭部和廣告案例（5 分鐘）。

5. 定位(position)的擴充

5.1 絕對定位的盒子居中

注意：絕對定位/固定定位的盒子不能通過設定 ​

​margin: auto​

​ 設定水準居中。

在使用絕對定位時要想實作水準居中，可以按照下圖的方法：

1. ​

   ​left: 50%;​

   ​：讓盒子的左側移動到父級元素的水準中心位置；
2. ​

   ​margin-left: -100px;​

   ​：讓盒子向左移動自身寬度的一半。

案例示範：相對定位案例。

盒子居中定位示意圖

課堂練習：實作盒子左中、右中、中上、中下、中中定位（5 分鐘）。

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解決的）

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

6. 綜合演練 - 淘寶輪播圖

圓角矩形設定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;

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

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

還是遵循的順時針。

7. 定位小結

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

注意：

1. 邊偏移需要和定位模式聯合使用，單獨使用無效；
2. ​

   ​top​

   ​​ 和​

   ​bottom​

   ​ 不要同時使用；
3. ​

   ​left​

   ​​ 和​

   ​right​

   ​ 不要同時使用。

8.學成網定位總結添加

一個小技巧:

9. 網頁布局總結

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

1). 标準流

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

2). 浮動

3). 定位