定位(position)

定位有兩個(gè)含義。

1 Positioned Layout Modulue

提供元素定位與層疊的相關(guān)功能，是CSS定位布局的一個(gè)核心模塊。

2 CSS定位屬性

知識點(diǎn)

1）document-tree

2）normal-flow

普通流：自然順序，從上至下，從左至右。

3）containing-block

相當(dāng)于一個(gè)容器。

為什么要用定位？

那么定位，最長運(yùn)用的場景再那里呢？ 來看幾幅圖片，你一定會(huì)有感悟！

第一幅圖， 小黃色塊可以再圖片上移動(dòng)：

第二幅圖， 左右箭頭壓住圖片：

第三幅圖, hot 再盒子外面多出一塊，更加突出：

以上三個(gè)小地方，如果用標(biāo)準(zhǔn)流或者浮動(dòng)，實(shí)現(xiàn)會(huì)比較復(fù)雜或者難以實(shí)現(xiàn)，此時(shí)我們用定位來做，just soso！

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1 邊偏移

也就說，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2 定位模式(定位的分類)

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

1）靜態(tài)定位：static

靜態(tài)定位是所有元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。

上面的話翻譯成白話： 就是網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位哦！ 其實(shí)就是標(biāo)準(zhǔn)流的特性。

在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

PS： 靜態(tài)定位其實(shí)沒啥可說的。

2)相對定位：relative(自戀型)

相對定位是將元素相對于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對位置，相當(dāng)于有了偏移的能力。

對元素設(shè)置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。如下圖所示，即是一個(gè)相對定位的效果展示：

注意：

相對定位最重要的一點(diǎn)是，它可以通過邊偏移移動(dòng)位置，但是原來的所占的位置，繼續(xù)占有。

其次，每次移動(dòng)的位置，是以自己的左上角為基點(diǎn)移動(dòng)（相對于自己來移動(dòng)位置）

就是說，相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。（相對定位不脫離文檔流）

如果說浮動(dòng)的主要目的是 讓多個(gè)塊級元素一行顯示，那么定位的主要價(jià)值就是 移動(dòng)位置， 讓盒子到我們想要的位置上去。

3）絕對定位：absolute (拼爹型)

注意：

①如果文檔可滾動(dòng)，絕對定位元素會(huì)隨著它滾動(dòng)，因?yàn)樵刈罱K會(huì)相對于正常流的某一部分定位。

當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對定位。

②絕對定位最重要的一點(diǎn)是，它可以通過邊偏移移動(dòng)位置，但是它完全脫標(biāo)，完全不占位置。

③父級是否定位？

父級沒有定位

若所有父元素都沒有定位，以瀏覽器為準(zhǔn)對齊(document文檔)。

父級有定位

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

子絕父相

這個(gè)“子絕父相”太重要了，是我們學(xué)習(xí)定位的口訣，時(shí)時(shí)刻刻記住的。

這句話的意思是 子級是絕對定位的話， 父級要用相對定位。

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

就是說， 子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相都是正確的。

但是，在我們網(wǎng)頁布局的時(shí)候， 最常說的 子絕父相是怎么來的呢？ 請看如下圖：

所以，我們可以得出如下結(jié)論：

因?yàn)樽蛹壥墙^對定位，不會(huì)占有位置， 可以放到父盒子里面的任何一個(gè)地方。

父盒子布局時(shí)，需要占有位置，因此父親只能是 相對定位。

這就是子絕父相的由來。

④絕對定位的盒子水平/垂直居中

普通的盒子是左右margin 改為 auto就可， 但是對于絕對定位就無效了

定位的盒子也可以水平或者垂直居中，有一個(gè)算法。

首先left 50% 父盒子的一半大小

然后走自己外邊距負(fù)的一半值就可以了 margin-left。

4)固定定位:fixed(認(rèn)死理型)

固定定位是絕對定位的一種特殊形式，類似于 正方形是一個(gè)特殊的 矩形。它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。

當(dāng)對元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點(diǎn)：

固定定位的元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器。

固定定位完全脫標(biāo)，不占有位置，不隨著滾動(dòng)條滾動(dòng)。

記憶法： 就類似于孫猴子， 無父無母，好不容易找到一個(gè)可靠的師傅（瀏覽器），就聽的師傅的，別的都不聽。

ie6等低版本瀏覽器不支持固定定位。

5)磁貼定位：sticky

3 疊放次序（z-index）

當(dāng)對多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊。

在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應(yīng)用z-index層疊等級屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。

比如： z-index: 2;

注意：

z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。

如果取值相同，則根據(jù)書寫順序，后來居上。

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

只有相對定位，絕對定位，固定定位有此屬性，其余標(biāo)準(zhǔn)流，浮動(dòng)，靜態(tài)定位都無此屬性，亦不可指定此屬性。

四種定位總結(jié)

定位模式轉(zhuǎn)換

跟 浮動(dòng)一樣， 元素添加了 絕對定位和固定定位之后， 元素模式也會(huì)發(fā)生轉(zhuǎn)換， 都轉(zhuǎn)換為 行內(nèi)塊模式，

因此 比如 行內(nèi)元素 如果添加了 絕對定位或者 固定定位后 浮動(dòng)后，可以不用轉(zhuǎn)換模式，直接給高度和寬度就可以了。

總結(jié)

以上是生活随笔為你收集整理的CSS定位(position)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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