CSS中position屬性介紹(新增sticky)

　　最近有點忘了position幾個取值的內容，在這裏簡單總結一下。

　　position的含義是指定位類型，取值類型能夠有：static、relative、absolute、fixed、inherit和sticky，這裏sticky是CSS3新發布的一個屬性。

一、position: static

　　static(沒有定位)是position的默認值，元素處於正常的文檔流中，會忽略left、top、right、bottom和z-index屬性。

二、position: relative

　　relative(相對定位)是指給元素設置相對於本來位置的定位，元素並不脫離文檔流，所以元素本來的位置會被保留，其餘的元素位置不會受到影響。

三、position: absolute

　　absolute(絕對定位)是指給元素設置絕對的定位，相對定位的對象能夠分爲兩種狀況：

　　1) 設置了absolute的元素若是存在有祖先元素設置了position屬性爲relative或者absolute，則這時元素的定位對象爲此已設置position屬性的祖先元素。

　　2) 若是並無設置了position屬性的祖先元素，則此時相對於body進行定位。

四、position: fixed

　　能夠簡單說fixed是特殊版的absolute，fixed元素老是相對於body定位的。

五、inherit

　　繼承父元素的position屬性，但須要注意的是IE8以及往前的版本都不支持inherit屬性。

　　在講sticky以前，先上代碼：

　　html：

<h5>Relative</h5>
    <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的定位屬性能夠看塊中的文字，顯示的效果以下，能夠看到與上面講的一致：

六、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元素則相對於該父元素定位。也就是若是要定位在頂部的話，此時這個效果就無效了。。。