position 屬性指定了元素的定位型別。
元素可以使用的頂部，底部，左側和右側屬性定位。
然而，這些屬性無法工作，除非是先設定position屬性。
他們也有不同的工作方式，這取決於定位方法。
position的屬性值共有四個常用的：static、relative、absolute、fixed。
還有三個不常用的：inherit、initial、sticky

static
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
所有元素在預設的情況下position屬性均為static，而我們在佈局上經常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right或者 z-index
宣告在position為static的情況下無效。
其用法為：在改變了元素的position屬性後可以將元素重置為static讓其迴歸到頁面預設的文件流中。

relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，“left:20” 會向元素的 LEFT 位置新增 20 畫素。
移動相對定位元素，但它原本所佔的空間不會改變。
相對定位元素經常被用來作為絕對定位元素的容器塊。
top / right / left / bottom 屬性是不會對relative定位的元素所佔據的文件空間產生偏移而margin是佔據文件空間的。

absolute
使用absolut定位的元素脫離文件流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以position非static方式定位的，而且一定要是直系祖先才算。如果元素沒有已定位的父元素，那麼它的位置相對於 html
relative和static方式在最外層時是以body標籤為定位原點的，而absolute方式在無父級是position非static定位時是以html作為原點定位，html和body元素相差大概有9px左右。
absolute 定位使元素的位置與文件流無關，因此不佔據空間。定位的元素和其他元素重疊。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
absolute定位要加 top:0; left:0
因為我們如果使用absolute或fixed定位的話，必須指定 left、right、 top、 bottom屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的預設值 auto，這將導致物件遵從正常的HTML佈局規則，在前一個物件之後立即被呈遞，簡單講就是都變成relative，會佔用文件空間，這點非常重要，很多人使用absolute定位後發現沒有脫離文件流就是這個原因.
祖先類的margin會讓子類的absolute跟著偏移，而padding卻不會讓子類的absolute發生偏移。因為就是absolute是根據祖先類的border進行的定位。
(absolute)定位物件在可視區域之外會導致滾動條出現。而放置(relative)定位物件在可視區域之外，滾動條不會出現
不論元素是行內元素還是塊級元素，都會生成一個塊級框，也就是例如行內元素span設定了absolute後就可以設定height和width屬性了

fixed
生成固定定位的元素，相對於瀏覽器視窗進行定位。即使視窗是滾動的它也不會移動。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支援。Fixed定位使元素的位置與文件流無關，因此不佔據空間。定位的元素和其他元素重疊
在很長的時間裡，這個屬性值因為相容性問題，並沒有得到非常廣泛的應用（IE6未實現該屬性值）。
fixed和absolute有很多共同點：
1.會改變行內元素的呈現模式，使display之變更為block。
2.會讓元素脫離文件流，不佔據空間。
3.預設會覆蓋到非定位元素上。
fixed與absolute最大的區別在於：absolute的”根元素“是可以被設定的，而fixed則其”根元素“固定為瀏覽器視窗。即當你滾動網頁，其元素與瀏覽器視窗之間的距離是恆定不變的。

sticky
粘性定位，該定位基於使用者滾動的位置。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支援 sticky 定位。 Safari 需要使用 -webkit- prefix。
寫法如下：
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}

inherit
規定應該從父元素繼承 position 屬性的值。
該關鍵字可指定一個屬性應從父元素繼承它的值，可用於任何 HTML 元素上的任何 CSS 屬性。

initial
設定該屬性為預設值
initial 關鍵字用於設定 CSS 屬性為它的預設值，可用於任何 HTML 元素上的任何 CSS 屬性。

重疊的元素
元素的定位與文件流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）
一個元素可以有正數或負數的堆疊順序：
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
這只是指同級元素間的堆疊。
父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。
注意： 如果兩個定位元素重疊，沒有指定z - index，最後定位在HTML程式碼中的元素將被顯示在最前面。
使用static 定位或無position定位的元素z-index屬性是無效的。

文件流
將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。浮動、絕對定位和相對定位會使元素脫離文件流。

參考於w3c，簡書的一些手冊，文章。
參考於
作者：南木小屋
連結：https://www.jianshu.com/p/a116022c6c99