今天給大家分享一下岂座，深度思考中的知識點——position定位有哪幾種?各有什么特點?
一陶因、背景介紹
POSITION是CSS中非常重要的一個屬性，通過position屬性巷嚣，我們可以讓元素相對于其正常位置喘先，父元素或者瀏覽器窗口進行偏移。
二廷粒、知識剖析
position概念：
CSS的很多其他屬性大多容易理解窘拯，比如字體，文本坝茎，背景等涤姊。有些CSS書籍、博客或網(wǎng)站也會對這些簡單的屬性進行大張旗鼓的介紹嗤放，而偏偏忽略了對一些難纏的屬性講解思喊，有避重就輕的嫌疑。CSS中主要難以理解的屬性包括盒型結構斤吐，各種垂直居中問題搔涝、彈性布局以及定位厨喂。
正如position is everything.
position屬性值:
position的屬性值共有四個常用的：static、relative庄呈、absolute蜕煌、fixed。
還有三個不常用的：inherit诬留、initial斜纪、sticky
三、知識詳解
Static
所有元素在默認的情況下position屬性均為static文兑，而我們在布局上經(jīng)常會用到的相對定位和絕對定位常用的屬性top盒刚、bottom、left绿贞、right或者 z-index
聲明在position為static的情況下無效因块。其用法為：在改變了元素的position屬性后可以將元素重置為static讓其回歸到頁面默認的文檔流中。
Relative
relative定位籍铁，又稱為相對定位涡上，從字面上來解析，我們就可以看出該屬性的主要特性：相對拒名。但是它相對的又是相對于什么地方而言的呢吩愧？這個是個重點，也是最讓我在學習CSS中迷糊的一個地方增显，現(xiàn)在讓我們來做個測試雁佳，我想大家都會明白的：
(1) 初始未定位
(2) 我們修改first元素的position屬性：
相對偏移20px后：
已經(jīng)很明顯了，相對定位相對的是它原本在文檔流中的位置而進行的偏移同云，而我們也知道relative定位也是遵循正常的文檔流糖权，它沒有脫離文檔流，但是它的top/left/right/bottom屬性是生效的梢杭，可以說它是static到absoult的一個中間過渡屬性温兼，最重要的是它還占有文檔空間秸滴，而且占據(jù)的文檔空間不會隨top / right / left / bottom 等屬性的偏移而發(fā)生變動武契，也就是說它后面的元素是依據(jù)虛線位置( top / left / right / bottom等屬性生效之前)進行的定位，這點一定要理解荡含。
小擴展
那好咒唆，我們知道了top / right / left / bottom 屬性是不會對relative定位的元素所占據(jù)的文檔空間產生偏移，那么margin /
padding屬性會讓該文檔空間產生偏移嗎释液？
答案是肯定的全释，我們一起來做個試驗吧：
(3) 添加margin屬性：
設置margin：20px后：
對比一下，答案一目了然误债，我們先將first元素外邊距設為20px浸船，那么second元素就得向下偏移40px妄迁，所以margin是占據(jù)文檔空間！
同理李命，大家可以自己動手測下padding的效果登淘！
Absolute
absolute定位，也稱為絕對定位封字，雖然它的名字號曰“絕對”黔州，但是它的功能卻更接近于"相對"一詞，為什么這么講呢阔籽？原來流妻，使用absolut定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進行定位笆制，而這個祖先類還必須是以position非static方式定位的绅这，
舉個例子，a元素使用absolute定位在辆，它會從父類開始找起君躺，尋找以position非static方式定位的祖先類元素(Note!一定要是直系祖先才算.），直到html根標簽為止开缎。
這里還需要注意的是棕叫，relative和static方式在最外層時是以body標簽為定位原點的，而absolute方式在無父級是position非static定位時是以html作為原點定位奕删。
但是呢俺泣，我們都知道html和body元素相差大概有9px左右。我們來看下效果：
(4) 添加absolute屬性：
position: absolute;top :0;left : 0
看了上面的信息后完残，細心的同學肯定要問了伏钠，為什么absolute定位要加 top:0; left:0; 屬性，這不是多此一舉嗎谨设？
其實我們加上這兩個屬性是完全必要的熟掂，因為我們如果使用absolute或fixed定位的話，必須指定 left扎拣、right赴肚、 top、 bottom屬性中的至少一個二蓝，否則left/right/top/bottom屬性會使用它們的默認值 auto誉券，這將導致對象遵從正常的HTML布局規(guī)則，在前一個對象之后立即被呈遞刊愚，簡單講就是都變成relative踊跟，會占用文檔空間，這點非常重要鸥诽，很多人使用absolute定位后發(fā)現(xiàn)沒有脫離文檔流就是這個原因商玫，這里要特別注意~~~
小擴展
既然absolute是根據(jù)祖先類中的position非static元素進行定位的箕憾，那么祖先類中的margin/padding會不會對position產生影響呢？看個例子先：
(5) 在absolute定位中添加margin / padding屬性：
結果很明朗了拳昌，祖先類的margin會讓子類的absolute跟著偏移厕九，而padding卻不會讓子類的absolute發(fā)生偏移。
總結一下地回，就是absolute是根據(jù)祖先類的border進行的定位扁远。
Note : 充分了解Relative和Absolute的區(qū)別后，我們可以分析得出這個結論：(absolute)定位對象在可視區(qū)域之外會導致滾動條出現(xiàn)刻像。而放置(relative)定位對象在可視區(qū)域之外畅买，滾動條不會出現(xiàn)。這點在我們的前端頁面制作中需要多加注意~~~
Fixed
在很長的時間里细睡，這個屬性值因為兼容性問題谷羞，并沒有得到非常廣泛的應用（IE6未實現(xiàn)該屬性值）。fixed和absolute有很多共同點：
1.會改變行內元素的呈現(xiàn)模式溜徙，使display之變更為block湃缎。
2.會讓元素脫離文檔流，不占據(jù)空間蠢壹。
3.默認會覆蓋到非定位元素上嗓违。
fixed與absolute最大的區(qū)別在于：absolute的”根元素“是可以被設置的，而fixed則其”根元素“固定為瀏覽器窗口图贸。即當你滾動網(wǎng)頁蹂季，其元素與瀏覽器窗口之間的距離是恒定不變的。
三疏日、拓展知識
z-index屬性：
z-index偿洁，又稱為對象的層疊順序，它用一個整數(shù)來定義堆疊的層次沟优，整數(shù)值越大涕滋，則被層疊在越上面，當然這是指同級元素間的堆疊挠阁，如果兩個對象的此屬性具有同樣的值宾肺，那么將依據(jù)它們在HTML文檔中流的順序層疊，寫在后面的將會覆蓋前面的鹃唯。需要注意的是爱榕，父子關系是無法用z-index來設定上下關系的瓣喊，一定是子級在上父級在下坡慌。
Note：使用static 定位或無position定位的元素z-index屬性是無效的。
什么是文檔流藻三？
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流洪橘。
只有三種情況會使得元素脫離文檔流跪者，分別是：浮動、絕對定位和相對定位熄求。
