今天給大家分享一下，深度思考中的知識點——position定位有哪幾種?各有什麼特點?
position是css中非常重要的乙個屬性，通過position屬性，我們可以讓元素相對於其正常位置，父元素或者瀏覽器視窗進行偏移。
position概念：
css的很多其他屬性大多容易理解，比如字型，文字，背景等。有些css書籍、部落格或**也會對這些簡單的屬性進行大張旗鼓的介紹，而偏偏忽略了對一些難纏的屬性講解，有避重就輕的嫌疑。css中主要難以理解的屬性包括盒型結構，各種垂直居中問題、彈性布局以及定位。
正如position is everything.
position屬性值:
position的屬性值共有四個常用的：static、relative、absolute、fixed。
還有三個不常用的：inherit、initial、sticky。
static
所有元素在預設的情況下position屬性均為static，而我們在布局上經常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right或者 z-index
宣告在position為static的情況下無效。其用法為：在改變了元素的position屬性後可以將元素重置為static讓其回歸到頁面預設的文件流中。
relative
relative定位，又稱為相對定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對於什麼地方而言的呢？這個是個重點，也是最讓我在學習css中迷糊的乙個地方，現在讓我們來做個測試，我想大家都會明白的：
(1) 初始未定位
(2) 我們修改first元素的position屬性：
相對偏移20px後：
已經很明顯了，相對定位相對的是它原本在文件流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文件流，它沒有脫離文件流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absoult的乙個中間過渡屬性，最重要的是它還占有文件空間，而且佔據的文件空間不會隨top / right / left / bottom 等屬性的偏移而發生變動，也就是說它後面的元素是依據虛線位置( top / left / right / bottom等屬性生效之前)進行的定位，這點一定要理解。
小擴充套件：那好，我們知道了top / right / left / bottom 屬性是不會對relative定位的元素所佔據的文件空間產生偏移，那麼margin /padding屬性會讓該文件空間產生偏移嗎？
答案是肯定的，我們一起來做個試驗吧：
(3) 新增margin屬性：
設定margin：20px後：
對比一下，答案一目了然，我們先將first元素外邊距設為20px，那麼second元素就得向下偏移40px，所以margin是佔據文件空間！
同理，大家可以自己動手測下padding的效果！
absolute
absolute定位，也稱為絕對定位，雖然它的名字號曰「絕對」，但是它的功能卻更接近於」相對」一詞，為什麼這麼講呢？原來，使用absolut定位的元素脫離文件流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以position非static方式定位的，
舉個例子，a元素使用absolute定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(note!一定要是直系祖先才算.），直到html根標籤為止。
這裡還需要注意的是，relative和static方式在最外層時是以body標籤為定位原點的，而absolute方式在無父級是position非static定位時是以html作為原點定位。
但是呢，我們都知道html和body元素相差大概有9px左右。我們來看下效果：
(4) 新增absolute屬性：
看了上面的資訊後，細心的同學肯定要問了，為什麼absolute定位要加 top:0; left:0; 屬性，這不是多此一舉嗎？
其實我們加上這兩個屬性是完全必要的，因為我們如果使用absolute或fixed定位的話，必須指定 left、right、 top、 bottom屬性中的至少乙個，否則left/right/top/bottom屬性會使用它們的預設值 auto，這將導致物件遵從正常的html布局規則，在前乙個物件之後立即被呈遞，簡單講就是都變成relative，會占用文件空間，這點非常重要，很多人使用absolute定位後發現沒有脫離文件流就是這個原因，這裡要特別注意~~~
小擴充套件
既然absolute是根據祖先類中的position非static元素進行定位的，那麼祖先類中的margin/padding會不會對position產生影響呢？看個例子先：
(5) 在absolute定位中新增margin / padding屬性：
結果很明朗了，祖先類的margin會讓子類的absolute跟著偏移，而padding卻不會讓子類的absolute發生偏移。
總結一下，就是absolute是根據祖先類的border進行的定位。
note : 充分了解relative和absolute的區別後，我們可以分析得出這個結論：(absolute)定位物件在可視區域之外會導致滾動條出現。而放置(relative)定位物件在可視區域之外，滾動條不會出現。這點在我們的前端頁面製作中需要多加注意~~~
fixed
在很長的時間裡，這個屬性值因為相容性問題，並沒有得到非常廣泛的應用（ie6未實現該屬性值）。fixed和absolute有很多共同點：
1.會改變行內元素的呈現模式，使display之變更為block。
2.會讓元素脫離文件流，不佔據空間。
3.缺省會覆蓋到非定位元素上。
fixed與absolute最大的區別在於：absolute的」根元素「是可以被設定的，而fixed則其」根元素「固定為瀏覽器視窗。即當你滾動網頁，其元素與瀏覽器視窗之間的距離是恆定不變的。
三、拓展知識
z-index屬性：
z-index，又稱為物件的層疊順序，它用乙個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個物件的此屬性具有同樣的值，那麼將依據它們在html文件中流的順序層疊，寫在後面的將會覆蓋前面的。需要注意的是，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。
note：使用static 定位或無position定位的元素z-index屬性是無效的。
什麼是文件流？
將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。
只有三種情況會使得元素脫離文件流，分別是：浮動、絕對定位和相對定位。
css中的定位（position）
w3c中對position各個 屬性值定義 static 元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。relative 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。absolute 元素框從文件流完全刪除，並...
css中的position定位詳解
position可以取四個值 static relative absolute fixed。static是盒子的預設的定位方式，即標準流方式。relative 它的定位基準是該盒子的標準流定位，即相對於標準流定位再進行偏移。如果某個盒子採用這個定位了，則它不會影響其父盒子的定位 對它後面的兄弟盒子而...
關於css中的position定位
通常會提到的position有幾種 position static 就是標準流定位，是預設設定 position relative 是相對定位，這個相對是相對於標準流的，所以顯然元素不會脫離標準流。position absolute 是絕對定位，元素脫離標準流並且參照父元素進行定位。position...