站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)?lái)css中position定位屬性的相關(guān)知識(shí)，position用于屬性規(guī)定元素的定位類型，不同的屬性值有著不同的定位樣式，希望對(duì)大家有幫助。
定位(position)
background-position 背景定位
如果，說(shuō)浮動(dòng)， 關(guān)鍵在一個(gè) “浮” 字上面， 那么 我們的定位，關(guān)鍵在于一個(gè) “位” 上。
PS: 定位是我們CSS算是數(shù)一數(shù)二難點(diǎn)的了，但是，你務(wù)必要學(xué)好它，我們CSS離不開(kāi)定位，特別是后面的js特效，天天和定位打交道。不要抵觸它，反而要愛(ài)上它，它可以讓我們工作更加輕松哦！
為什么要用定位？
那么定位，最長(zhǎng)運(yùn)用的場(chǎng)景再那里呢？ 來(lái)看幾幅圖片，你一定會(huì)有感悟！
-
小黃色塊可以再圖片上移動(dòng)：
-
左右箭頭壓住圖片：
-
hot 再盒子外面多出一塊，更加突出：
以上三個(gè)小地方，如果用標(biāo)準(zhǔn)流或者浮動(dòng)，實(shí)現(xiàn)會(huì)比較復(fù)雜或者難以實(shí)現(xiàn)，此時(shí)我們用定位來(lái)做。
元素的定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
| 邊偏移屬性 | 描述 |
|---|---|
| top | 頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離 |
| bottom | 底部偏移量，定義元素相對(duì)于其父元素下邊線的距離 |
| left | 左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離 |
| right | 右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離 |
也就說(shuō)，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分類)
在CSS中，position屬性用于定義元素的定位模式，其基本語(yǔ)法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
| 值 | 描述 |
|---|---|
| static | 自動(dòng)定位（默認(rèn)定位方式） |
| relative | 相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位 |
| absolute | 絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位 |
| fixed | 固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位 |
靜態(tài)定位(static)
靜態(tài)定位是所有元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。
上面的話翻譯成白話： 就是網(wǎng)頁(yè)中所有元素都默認(rèn)的是靜態(tài)定位。 其實(shí)就是標(biāo)準(zhǔn)流的特性。
在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移屬性（top、bottom、left或right）來(lái)改變?cè)氐奈恢谩?/mark>
其實(shí)沒(méi)啥，靜態(tài)定位唯一的用處：就是 取消定位。 position: static;
相對(duì)定位relative(自戀型)
相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)（自己的）位置。
對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)邊偏移屬性改變?cè)氐奈恢茫?mark>但是它在文檔流中的位置仍然保留（保留原來(lái)所占位置）。如下圖所示，即是一個(gè)相對(duì)定位的效果展示：
注意：
- 相對(duì)定位最重要的一點(diǎn)是，它可以通過(guò)邊偏移移動(dòng)位置，但是原來(lái)的所占的位置，繼續(xù)占有。
- 其次，每次移動(dòng)的位置，是以自己的左上角為基點(diǎn)移動(dòng)（相對(duì)于自己來(lái)移動(dòng)位置）
就是說(shuō)，相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。（相對(duì)定位不脫標(biāo)）
如果說(shuō)浮動(dòng)的主要目的是 讓多個(gè)塊級(jí)元素一行顯示，那么定位的主要價(jià)值就是 移動(dòng)位置， 讓盒子到我們想要的位置上去。
絕對(duì)定位absolute (拼爹型)
[注意] 如果文檔可滾動(dòng)，絕對(duì)定位元素會(huì)隨著它滾動(dòng)，因?yàn)樵刈罱K會(huì)相對(duì)于正常流的某一部分定位。
當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。
注意： 絕對(duì)定位最重要的一點(diǎn)是，它可以通過(guò)邊偏移移動(dòng)位置，但是它完全脫標(biāo)，完全不占位置。
絕對(duì)定位absolute又分三種情況：
1.父級(jí)沒(méi)有定位
若所有父元素都沒(méi)有定位，以瀏覽器當(dāng)前屏幕為準(zhǔn)對(duì)齊(document文檔)。
2.父級(jí)有定位
絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。
3.子絕父相 ※※
這句話的意思是子級(jí)是絕對(duì)定位的話， 父級(jí)要用相對(duì)定位。
首先， 我們說(shuō)下， 絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位絕對(duì)、固定或相對(duì)定位）的父元素（祖先）進(jìn)行定位。
就是說(shuō)，子級(jí)是絕對(duì)定位，父親只要是定位即可（不管父親是絕對(duì)定位還是相對(duì)定位，甚至是固定定位都可以），就是說(shuō)， 子絕父絕，子絕父相都是正確的。但是，極力推薦用相對(duì)位置
但是，在我們網(wǎng)頁(yè)布局的時(shí)候， 最常說(shuō)的 子絕父相是怎么來(lái)的呢？ 請(qǐng)看如下圖：
所以，我們可以得出如下結(jié)論：
因?yàn)樽蛹?jí)是絕對(duì)定位，不會(huì)占有位置， 可以放到父盒子里面的任何一個(gè)地方。
父盒子布局時(shí)，需要占有位置，因此父親只能是 相對(duì)定位.
這就是子絕父相的由來(lái)。
絕對(duì)定位的盒子水平/垂直居中
普通的盒子是左右margin 改為 auto就可， 但是對(duì)于絕對(duì)定位就無(wú)效了
定位的盒子也可以水平或者垂直居中，有一個(gè)算法。
- 首先left 50% 父盒子的一半大小
- 然后走自己外邊距負(fù)的一半值就可以了 margin-left。
代碼示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> p { width: 200px; height: 200px; background-color: pink; /*margin: 100px auto;*/ /*float: left;*/ position: absolute; /*加了定位 浮動(dòng)的的盒子 margin 0 auto 失效了*/ left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } </style></head><body> <p></p></body></html>
固定定位fixed(認(rèn)死理型)
固定定位是絕對(duì)定位的一種特殊形式，類似于 正方形是一個(gè)特殊的 矩形。它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。
當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點(diǎn)：
- 固定定位的元素跟父親沒(méi)有任何關(guān)系，只認(rèn)瀏覽器。
- 固定定位完全脫標(biāo)，不占有位置，不隨著滾動(dòng)條滾動(dòng)。
ie6等低版本瀏覽器不支持固定定位。
疊放次序（z-index）
當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊。
在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對(duì)定位元素應(yīng)用z-index層疊等級(jí)屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。
比如： z-index: 2; font-weight: 700
注意：
- z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。
- 如果取值相同，則根據(jù)書寫順序，后來(lái)居上。
- 后面數(shù)字一定不能加單位。
- 只有相對(duì)定位，絕對(duì)定位，固定定位有此屬性，其余標(biāo)準(zhǔn)流，浮動(dòng)，靜態(tài)定位都無(wú)此屬性，亦不可指定此屬性。
四種定位總結(jié)
| 定位模式 | 是否脫標(biāo)占有位置 | 是否可以使用邊偏移 | 移動(dòng)位置基準(zhǔn) |
|---|---|---|---|
| 靜態(tài)static | 不脫標(biāo)，正常模式 | 不可以 | 正常模式 |
| 相對(duì)定位relative | 脫標(biāo)，占有位置 | 可以 | 相對(duì)自身位置移動(dòng)（自戀型） |
| 絕對(duì)定位absolute | 完全脫標(biāo)，不占有位置 | 可以 | 相對(duì)于定位父級(jí)移動(dòng)位置（拼爹型） |
| 固定定位fixed | 完全脫標(biāo)，不占有位置 | 可以 | 相對(duì)于瀏覽器移動(dòng)位置（認(rèn)死理型） |
定位模式轉(zhuǎn)換
跟 浮動(dòng)一樣， 元素添加了 絕對(duì)定位和固定定位之后， 元素模式也會(huì)發(fā)生轉(zhuǎn)換， 都轉(zhuǎn)換為行內(nèi)塊模式，
行內(nèi)塊 的寬度和高度 跟內(nèi)容有關(guān)系
** 因此 比如 行內(nèi)元素 如果添加了 絕對(duì)定位或者 固定定位后 浮動(dòng)后，可以不用轉(zhuǎn)換模式，直接給高度和寬度就可以了。**
順豐案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .sf { width: 1259px; height: 472px; margin: 100px auto; position: relative; } .nav { width: 960px; height: 80px; background-color: #000; position: absolute; bottom: 0; left: 50%; margin-left: -480px; } .nav li { list-style-type: none; width: 160px; height: 80px; float: left; } .nav li a { width: 160px; height: 80px; display: block; text-align: center; line-height: 80px; color: #fff; text-decoration: none; } .nav li a:hover { color: #000; background-color: #fff; } </style></head><body> <p class="sf"> <a href="#"> <img src="images/sf.png" alt="" height="472" width="1259"> </a> <p class="nav"> <ul> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> <li><a href="#">快遞查詢</a></li> </ul> </p> </p></body></html>
（學(xué)習(xí)視頻分享：css視頻教程）
