我們在布局的時候經常會使用到position的屬性，那么你真的完全了解它嗎？

position概念

position 屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

position屬性值:

position的屬性值共有四個常用的：static、relative、absolute、fixed。還有不常用的：inherit、initial、sticky。

知識詳解

Static

所有元素在默認的情況下position屬性均為static，而我們在布局上經常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right或者 z-index 聲明在position為static的情況下無效。其用法為：在改變了元素的position屬性后可以將元素重置為static讓其回歸到頁面默認的普通流中。

Relative

俗稱的相對定位，重點在于對相對理解。我們此前說過每個元素在頁面的普通流中會有“占用”一個位置，這個位置可以理解為默認位置，而相對定位就是將元素偏離元素的默認位置，但普通流中依然保持著原有的默認位置，并沒有脫離普通流，只是視覺上發生的偏移。

strong { background: #808080; }

em { background: #ffd800; }

span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }strongemspan

請注意看，在這里我是有對span進行width屬性的賦值（為100px）。但是我們可以看到span在運用了relative這個position屬性值后，依然對width屬性無效，換而言之，position: relative并沒有改變行內元素的Display屬性，這個概念非常重要（注意與接下來的absolute的區別）。

Absolute

俗稱的絕對定位，絕對定位是相對而言的，怎么理解呢？應用了position: absolute的元素會循著節點樹中的父（祖）元素來確定“根”，然后相對這個“根”元素來偏移。如果在其節點樹中所有父（祖）元素都沒有設置position屬性值為relative或者absolute則該元素最終將對body進行位置偏移。應用了position: absolute的元素會脫離頁面中的普通流并改變Display屬性（重點）！

現在我們對A-2這個div設置絕對定位(Top: 0, Left: 0)，而沒有對它的父元素（A、A-1）設置任何的position值

可以看到（A-2）最終是根據body來產生了位移

從上面的圖，我們可以總結以下幾個結論。

1）塊狀元素在position(relative/static)的情況下width為100%，但是設置了position: absolute之后，會將width變成auto（會受到父元素的寬度影響）。

2）元素設置了position:

absolute之后，如果沒有設置top、bottom、left、right屬性的話，瀏覽器會默認設置成auto，而auto的值則是該元素的“默認位置”。即設置position: absolute前后的offsetTop和offsetLeft屬性值不變。

特殊情況：

Firefox的話會直接將top、left設置成offsetTop和offsetLeft的值而非auto。

IE7下的表現更類似于float，會附加到父元素的末尾。

Fixed

在很長的時間里，這個屬性值因為兼容性問題，并沒有得到非常廣泛的應用（IE6未實現該屬性值）。fixed和absolute有很多共同點：

1.會改變行內元素的呈現模式，使display之變更為block。

2.會讓元素脫離普通流，不占據空間。

3.默認會覆蓋到非定位元素上。

fixed與absolute最大的區別在于：absolute的”根元素“是可以被設置的，而fixed則其”根元素“固定為瀏覽器窗口。即當你滾動網頁，其元素與瀏覽器窗口之間的距離是恒定不變的。

拓展知識

1）應用了position: relative/absolute的元素，margin屬性仍然有效，以position:relative來舉例。如果設置了left、top、bottom、right的屬性，建議大家不要設置margin數據，因為很難精確元素的定位，盡量減少干擾因素。

2）position: absolute忽略根元素的padding。

3）在IE6/7中設置position屬性后會導致z-index屬性失效

解決方案，父元素設置一個更大的z-index值即可

4）行內元素在應用了position：absolute之后會改變display。

因此，要注意到relative是并沒有改變行內元素的呈現模式，而absolute是會改變行內元素的呈現模式，如果設置了absolute并不需要顯式的的將元素display改成block。

5）應用了position: absolute / relative之后，會覆蓋其他非定位元素（即position為static的元素），如果你不想覆蓋到其他元素，也可以將z-index設置成-1。

absolute是一個能夠獨當一面的屬性，其使用可以不要relative，當然，也可以不使用z-index。在默認情況下，元素應用了非static的position屬性后，其就會有一個隱晦的層級，會居于普通元素之上，無需額外設置z-index屬性值。

1）元素同時應用了position: relative、float、（top / left / bottom / right）屬性后，則元素先浮動到相應的位置，然后再根據（top / left / bottom / right）所設置的距離來發生偏移。

左圖中的div是沒有設置top、left值的，而右邊則設置了50px的偏移。

2）元素同時應用了position: absolute及float屬性，則float失效。

3）第一個元素應用了position之后會覆蓋著接下來的float元素（如果兩個元素所處的位置相同）

如果你不將float的元素的position設置成relative的話，你想通過設置float元素的z-index來的達到覆蓋position:absolute是無效的。同理，float元素下面存在position: absolute的子元素，如果你不將float的元素的position設置成relative的話，absolute元素是不會定位到float元素的。

4）同時應用position: absolute和float: left會導致清除浮動無效（position: relative則可以清除浮動）。

常用的清除浮動的方法有兩種：

1.通過在容器中添加一個標簽，設置該標簽的樣式為 clear: both

2.容器設置overflow: hidden