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