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屬性

　具體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時才會發生定位，否則並不會發生定位。

　　第二點則需要考慮父容器的高度情況：sticky元素在到達父容器的底部時，則不會再發生定位，如果父容器高度並沒有比sticky元素高，那麼sticky元素一開始就達到了底部，並不會有定位的效果。

　　此外還有一點就是父元素的overflow屬性，如果父元素的overflow屬性並不是預設的visible屬性，那麼sticky元素則相對於該父元素定位。也就是如果要定位在頂部的話，此時這個效果就無效了。。。