對position的幾點理解

在w3c中，position 屬性規定元素的定位型別，css例項：

.box

它可能的值包括以下五種：

absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過「left」, 「top」, 「right」以及」bottom」屬性進行規定。

fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器視窗進行定位。

元素的位置通過「left」, 「top」, 「right」以及「bottom」屬性進行規定。

relative（相對定位）：生成相對定位的元素，相對於其正常位置進行定位。因此，」left:20」會向元素的 left 位置新增 20 畫素。

static（預設值）：沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。

inherit（繼承）：規定應該從父元素繼承 position 屬性的值。

以上是官方的定義，仔細研究不難發現一些值得注意的事項，以下也包括我在工作中總結的一些技巧。

一、絕對定位的父級需要相對定位嘛？

記得剛入行，培訓老師講到這裡，給我們的要求是：只要某個模組需要定位，必須給父級position:relative；在該模組加上position:absolute。當時比較單純，老師說什麼就是什麼，以至於很長一段時間根本不知其所以然還依然在這麼用。後來偶然看到官方的文件才發現這是不正確的做法。

『生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。』這是官方的定義，所以只要它的父級（只要是父級，不一定是直系父級）有新增除static定位以外的任何乙個屬性都是可以實現的，不一定只能是relative。

二、相對定位你理解了嘛？

position:relative是個功能強大的屬性。新增該屬性的元素是相對於它的正常位置進行的定位，正常位置，就是其本來在文件流裡面的位置。

看下面兩張圖的比較：

這是正常文件流裡面的兩個div排列方式，結構如下：

第乙個盒子第二個盒子

css如下：

.box1 .box2

而新增relative屬性的div呢，位置發生了變化：

這裡給第二個div新增了class：

第乙個盒子第二個盒子

它的css為：

.pr

很明顯看出了它們的區別，第二個新增position:relative;的div相對於它本來的位置向左偏移100px，向下偏移50px，如css規定的那樣。

三、其他注意事項