定位(position)

定位有兩個含義。

1 Positioned Layout Modulue

提供元素定位與層疊的相關功能，是CSS定位布局的一個核心模塊。

2 CSS定位屬性

知識點

1）document-tree

2）normal-flow

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

3）containing-block

相當于一個容器。

為什么要用定位？

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

第一幅圖， 小黃色塊可以再圖片上移動：

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

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

以上三個小地方，如果用標準流或者浮動，實現會比較復雜或者難以實現，此時我們用定位來做，just soso！

元素的定位屬性

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

1 邊偏移

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

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

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

選擇器{position:屬性值;}

position屬性的常用值

1）靜態定位：static

靜態定位是所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中默認的位置。

上面的話翻譯成白話： 就是網頁中所有元素都默認的是靜態定位哦！ 其實就是標準流的特性。

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

PS： 靜態定位其實沒啥可說的。

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

相對定位是將元素相對于它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置，相當于有了偏移的能力。

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

注意：

相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。

其次，每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）

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

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

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

注意：

①如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位。

當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。

②絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置。

③父級是否定位？

父級沒有定位

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

父級有定位

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

子絕父相

這個“子絕父相”太重要了，是我們學習定位的口訣，時時刻刻記住的。

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

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

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

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

所以，我們可以得出如下結論：

因為子級是絕對定位，不會占有位置， 可以放到父盒子里面的任何一個地方。

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

這就是子絕父相的由來。

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

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

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

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

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

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

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

當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關系，只認瀏覽器。

固定定位完全脫標，不占有位置，不隨著滾動條滾動。

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

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

5)磁貼定位：sticky

3 疊放次序（z-index）

當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。

在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。

比如： z-index: 2;

注意：

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

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

后面數字一定不能加單位。

只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。

四種定位總結

定位模式轉換

跟 浮動一樣， 元素添加了 絕對定位和固定定位之后， 元素模式也會發生轉換， 都轉換為 行內塊模式，

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。