定位(position)

1. CSS 布局的三種機(jī)制

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

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

普通流（標(biāo)準(zhǔn)流）

浮動

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

定位

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

2. 為什么使用定位

我們先來看一個效果，同時思考一下用標(biāo)準(zhǔn)流或浮動能否實(shí)現(xiàn)類似的效果？

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

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

結(jié)論：要實(shí)現(xiàn)以上效果，標(biāo)準(zhǔn)流或浮動都無法快速實(shí)現(xiàn)

一句話總結(jié)定位：

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

所以，我們腦海應(yīng)該有三種布局機(jī)制的上下順序

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

3. 定位詳解

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

定位 = 定位模式 + 邊偏移

3.1 邊偏移

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

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

邊偏移屬性示例描述

top	top: 80px	頂端偏移量，定義元素相對于其父元素上邊線的距離。
bottom	bottom: 80px	底部偏移量，定義元素相對于其父元素下邊線的距離。
left	left: 80px	左側(cè)偏移量，定義元素相對于其父元素左邊線的距離。
right	right: 80px	右側(cè)偏移量，定義元素相對于其父元素右邊線的距離

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

3.2 定位模式 (position)

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

選擇器 { position: 屬性值; }

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

值語義

static	靜態(tài)定位
relative	相對定位
absolute	絕對定位
fixed	固定定位

3.2.1 靜態(tài)定位(static) - 了解

• 靜態(tài)定位是元素的默認(rèn)定位方式，無定位的意思。它相當(dāng)于 border 里面的none， 不要定位的時候用。
• 靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移。
• 靜態(tài)定位在布局時我們幾乎不用的

3.2.1 相對定位(relative) - 重要

• 相對定位是元素相對于它 原來在標(biāo)準(zhǔn)流中的位置 來說的。（自戀型）

效果圖：

相對定位的特點(diǎn)：（務(wù)必記住）

• 相對于 自己原來在標(biāo)準(zhǔn)流中位置來移動的
• 原來在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待它。

3.2.3 絕對定位(absolute) - 重要

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

完全脫標(biāo) —— 完全不占位置；

父元素沒有定位，則以瀏覽器為準(zhǔn)定位（Document 文檔）。

父元素要有定位

• 將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素（祖先）進(jìn)行定位。

絕對定位的特點(diǎn)：（務(wù)必記住）

• 絕對是以帶有定位的父級元素來移動位置 （拼爹型） 如果父級都沒有定位，則以瀏覽器文檔為準(zhǔn)移動位置
• 不保留原來的位置，完全是脫標(biāo)的。

因?yàn)榻^對定位的盒子是拼爹的，所以要和父級搭配一起來使用。

定位口訣 —— 子絕父相

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

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

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

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

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

分析：

方向箭頭疊加在其他圖片上方，應(yīng)該使用絕對定位，因?yàn)?strong>絕對定位完全脫標(biāo)，完全不占位置。

父級盒子應(yīng)該使用相對定位，因?yàn)?strong>相對定位不脫標(biāo)，后續(xù)盒子仍然以標(biāo)準(zhǔn)流的方式對待它。

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

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

3.2.4 固定定位(fixed) - 重要

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

完全脫標(biāo) —— 完全不占位置；

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

• 跟父元素沒有任何關(guān)系；單獨(dú)使用的
• 不隨滾動條滾動。

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

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

4. 定位(position)的案例

4.1 哈根達(dá)斯

案例截圖：

哈根達(dá)斯分析

一個大的 div 中包含 3 張圖片；

大的 div 水平居中；

2 張小圖片重疊在廣告圖片上方 —— 脫標(biāo)，不占位置，需要使用絕對定位；

2 張小圖片分別顯示在左上角和右下角 —— 需要使用邊偏移確定準(zhǔn)確位置。

案例小結(jié)：

子絕父相 —— 子元素使用絕對定位，父元素使用相對定位；

與浮動的對比：

• 絕對定位：脫標(biāo)，利用邊偏移指定準(zhǔn)確位置；
• 浮動：脫標(biāo)，不能指定準(zhǔn)確位置，讓多個塊級元素在一行顯示。

4.2 仿新浪頭部和廣告

新浪案例分析

頂部圖片固定在瀏覽器可視窗口頂部，不會隨窗口一起滾動；

左右兩側(cè)的廣告圖片固定在瀏覽器可視窗口的左右兩側(cè)，不會隨窗口一起滾動；

注意：底部的內(nèi)容圖片初始顯示在頂部圖片的下方，如何解決？

步驟 1 —— 頂部圖片和底部內(nèi)容

.top {/* 注意：使用固定定位時，如果盒子中沒有內(nèi)容，需要指定寬度 */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; }

注意：

在使用固定定位時，如果盒子中沒有內(nèi)容，需要指定寬度

設(shè)置底部內(nèi)容圖片的頂部 margin，可以讓底部盒子初始顯示在頂部圖片的下方。

步驟 2 —— 左右兩側(cè)廣告

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

注意：不要同時使用 left 和 right 和邊偏移屬性。

案例小結(jié)：

固定定位的應(yīng)用場景：固定在瀏覽器可視窗口某個位置的布局；

在使用固定和絕對定位時，如果盒子中沒有內(nèi)容，需要指定寬度（稍后就講）。

課堂練習(xí)：模擬老師的隨堂案例完成仿新浪頭部和廣告案例（5 分鐘）。

5. 定位(position)的擴(kuò)展

5.1 絕對定位的盒子居中

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

在使用絕對定位時要想實(shí)現(xiàn)水平居中，可以按照下圖的方法：

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

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

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

盒子居中定位示意圖

5.2 堆疊順序（z-index）

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

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

應(yīng)用 z-index 層疊等級屬性可以調(diào)整盒子的堆疊順序。如下圖所示：

z-index 的特性如下：

屬性值：正整數(shù)、負(fù)整數(shù)或 0，默認(rèn)值是 0，數(shù)值越大，盒子越靠上；

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

數(shù)字后面不能加單位。

注意：z-index 只能應(yīng)用于相對定位、絕對定位和固定定位的元素，其他標(biāo)準(zhǔn)流、浮動和靜態(tài)定位無效。

案例演示：堆疊順序。

5.3 定位改變display屬性

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

• 可以用inline-block 轉(zhuǎn)換為行內(nèi)塊
• 可以用浮動 float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類似，并不完全一樣，因?yàn)楦邮敲摌?biāo)的）
• 絕對定位和固定定位也和浮動類似， 默認(rèn)轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。

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

完善新浪導(dǎo)航案例

同時注意：

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

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

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

圓角矩形設(shè)置4個角

圓角矩形可以為4個角分別設(shè)置圓度， 但是是有順序的

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

• 如果4個角，數(shù)值相同

border-radius: 15px;

* 里面數(shù)值不同，我們也可以按照簡寫的形式，具體格式如下:~~~css border-radius: 左上角 右上角 右下角 左下角;

還是遵循的順時針。

7. 定位小結(jié)

定位模式是否脫標(biāo)占有位置移動位置基準(zhǔn)模式轉(zhuǎn)換（行內(nèi)塊）使用情況

靜態(tài)static	不脫標(biāo)，正常模式	正常模式	不能	幾乎不用
相對定位relative	不脫標(biāo)，占有位置	相對自身位置移動	不能	基本單獨(dú)使用
絕對定位absolute	完全脫標(biāo)，不占有位置	相對于定位父級移動位置	能	要和定位父級元素搭配使用
固定定位fixed	完全脫標(biāo)，不占有位置	相對于瀏覽器移動位置	能	單獨(dú)使用，不需要父級

注意：

邊偏移需要和定位模式聯(lián)合使用，單獨(dú)使用無效；

top 和 bottom 不要同時使用；

left 和 right 不要同時使用。

8.學(xué)成網(wǎng)定位總結(jié)添加

一個小技巧:

9. 網(wǎng)頁布局總結(jié)

一個完整的網(wǎng)頁，有標(biāo)準(zhǔn)流 、 浮動 、 定位 一起完成布局的。每個都有自己的專門用法。

1). 標(biāo)準(zhǔn)流

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

2). 浮動

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

3). 定位

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

總結(jié)

以上是生活随笔為你收集整理的二、前端pink老师的CSS定位学习笔记（超详细，简单易懂）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。