position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和sticky，這裡sticky是CSS3新釋出的一個屬性。
1、position: static
static(沒有定位)是position的預設值，元素處于正常的文檔流中，會忽略left、top、right、bottom和z-index屬性。
2、position: relative
relative(相對定位)是指給元素設定相對于原本位置的定位，元素并不脫離文檔流，是以元素原本的位置會被保留，其他的元素位置不會受到影響。
3、position: absolute
absolute(絕對定位)是指給元素設定絕對的定位，相對定位的對象可以分為兩種情況：
1) 設定了absolute的元素如果存在有祖先元素設定了position屬性為relative或者absolute，則這時元素的定位對象為此已設定position屬性的祖先元素。
2) 如果并沒有設定了position屬性的祖先元素，則此時相對于body進行定位。
4、position: fixed
可以簡單說fixed是特殊版的absolute，fixed元素總是相對于body定位的。
5、inherit
繼承父元素的position屬性，但需要注意的是IE8以及往前的版本都不支援inherit屬性。
在講sticky之前，先上代碼：
html：
複制代碼
Relative
<div class="div-container div-container1">
<div class="div1">static1</div>
<div class="div2">relative1</div>
<div class="div3">static1</div>
</div>
<h5>Absolute</h5>
<div class="div-container div-container2">
<div class="div1">static2</div>
<div class="div2">absolute2</div>
<div class="div3">static2</div>
</div>
<h5>Relative contains Absolute</h5>
<div class="div-container div-container3">
<div class="div1">static3</div>
<div class="div2">absolute3</div>
<div class="div3">static3</div>
</div>
<h5>Absolute contains Absolute</h5>
<div class="div-container div-container4">
<div class="div1">static3</div>
<div class="div2">absolute3</div>
<div class="div3">static3</div>
</div> 複制代碼
具體div的定位屬性可以看塊中的文字，顯示的效果如下，可以看到與上面講的一緻：
6、sticky
position屬性中最有意思的就是sticky了，設定了sticky的元素，在螢幕範圍（viewport）時該元素的位置并不受到定位影響（設定是top、left等屬性無效），當該元素的位置将要移出偏移範圍時，定位又會變成fixed，根據設定的left、top等屬性成固定位置的效果。
可以知道sticky屬性有以下幾個特點：
該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
當元素在容器中被滾動超過指定的偏移值時，元素在容器内固定在指定位置。亦即如果你設定了top: 50px，那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。
元素固定的相對偏移是相對于離它最近的具有卷軸欄的祖先元素，如果祖先元素都不可以滾動，那麼是相對于viewport來計算元素的偏移量
比較蛋疼的是這個屬性的相容性還不是很好，目前仍是一個試驗性的屬性，并不是W3C推薦的标準。它之是以會出現，也是因為監聽scroll事件來實作粘性布局使浏覽器進入慢滾動的模式，這與浏覽器想要通過硬體加速來提升滾動的體驗是相悖的。
具體情況可以看下圖，基本上可以說這個屬性使用的浏覽器隻有FireFox和iOS的Safari：
簡單的說，要讓sticky屬性生效的條件有以下兩點：
一個是元素自身在文檔流中的位置
另一個是該元素的父容器的邊緣
第一點上面已經講過了，如果設定了top: 50px，那麼元素在達到距離頂部50px時才會發生定位，否則并不會發生定位。