我們在布局的時候經(jīng)常會使用到position的屬性，那么你真的完全了解它嗎凰兑？
position概念
position 屬性把元素放置到一個靜態(tài)的、相對的吏够、絕對的滩报、或固定的位置中。
position屬性值:
position的屬性值共有四個常用的：static售睹、relative、absolute昌妹、fixed。還有不常用的：inherit飞崖、initial、sticky固歪。
知識詳解
Static
所有元素在默認(rèn)的情況下position屬性均為static，而我們在布局上經(jīng)常會用到的相對定位和絕對定位常用的屬性top逢防、bottom蒲讯、left、right或者 z-index 聲明在position為static的情況下無效判帮。其用法為：在改變了元素的position屬性后可以將元素重置為static讓其回歸到頁面默認(rèn)的普通流中。
Relative
俗稱的相對定位，重點在于對相對理解约巷。我們此前說過每個元素在頁面的普通流中會有“占用”一個位置，這個位置可以理解為默認(rèn)位置踩麦，而相對定位就是將元素偏離元素的默認(rèn)位置氓癌，但普通流中依然保持著原有的默認(rèn)位置，并沒有脫離普通流反粥，只是視覺上發(fā)生的偏移疲迂。
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }strongemspan
請注意看尤蒿，在這里我是有對span進(jìn)行width屬性的賦值（為100px）。但是我們可以看到span在運用了relative這個position屬性值后腰池，依然對width屬性無效忙芒，換而言之讳侨，position: relative并沒有改變行內(nèi)元素的Display屬性，這個概念非常重要（注意與接下來的absolute的區(qū)別）甘桑。
Absolute
俗稱的絕對定位歹叮，絕對定位是相對而言的，怎么理解呢德谅？應(yīng)用了position: absolute的元素會循著節(jié)點樹中的父（祖）元素來確定“根”萨螺，然后相對這個“根”元素來偏移。如果在其節(jié)點樹中所有父（祖）元素都沒有設(shè)置position屬性值為relative或者absolute則該元素最終將對body進(jìn)行位置偏移慰技。應(yīng)用了position: absolute的元素會脫離頁面中的普通流并改變Display屬性（重點）！
現(xiàn)在我們對A-2這個div設(shè)置絕對定位(Top: 0, Left: 0)掏颊，而沒有對它的父元素（A艾帐、A-1）設(shè)置任何的position值
可以看到（A-2）最終是根據(jù)body來產(chǎn)生了位移
從上面的圖柒爸，我們可以總結(jié)以下幾個結(jié)論。
1）塊狀元素在position(relative/static)的情況下width為100%乐横，但是設(shè)置了position: absolute之后，會將width變成auto（會受到父元素的寬度影響）晰奖。
2）元素設(shè)置了position:
absolute之后，如果沒有設(shè)置top匾南、bottom蛔外、left溯乒、right屬性的話豹爹，瀏覽器會默認(rèn)設(shè)置成auto，而auto的值則是該元素的“默認(rèn)位置”光稼。即設(shè)置position: absolute前后的offsetTop和offsetLeft屬性值不變孩等。
特殊情況：
Firefox的話會直接將top、left設(shè)置成offsetTop和offsetLeft的值而非auto肄方。
IE7下的表現(xiàn)更類似于float，會附加到父元素的末尾虹茶。
Fixed
在很長的時間里隅要，這個屬性值因為兼容性問題，并沒有得到非常廣泛的應(yīng)用（IE6未實現(xiàn)該屬性值）洲炊。fixed和absolute有很多共同點：
1.會改變行內(nèi)元素的呈現(xiàn)模式尼啡，使display之變更為block询微。
2.會讓元素脫離普通流，不占據(jù)空間撑毛。
3.默認(rèn)會覆蓋到非定位元素上。
fixed與absolute最大的區(qū)別在于：absolute的”根元素“是可以被設(shè)置的雌续，而fixed則其”根元素“固定為瀏覽器窗口胯杭。即當(dāng)你滾動網(wǎng)頁，其元素與瀏覽器窗口之間的距離是恒定不變的鸽心。
