最近有點忘了position幾個取值的內(nèi)容，在這里簡單總結(jié)一下。

position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和sticky，這里sticky是CSS3新發(fā)布的一個屬性。

1、position: static

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

2、position: relative

relative(相對定位)是指給元素設(shè)置相對于原本位置的定位，元素并不脫離文檔流，因此元素原本的位置會被保留，其他的元素位置不會受到影響。

3、position: absolute

absolute(絕對定位)是指給元素設(shè)置絕對的定位，相對定位的對象可以分為兩種情況：

1) 設(shè)置了absolute的元素如果存在有祖先元素設(shè)置了position屬性為relative或者absolute，則這時元素的定位對象為此已設(shè)置position屬性的祖先元素。

2) 如果并沒有設(shè)置了position屬性的祖先元素，則此時相對于body進(jìn)行定位。

4、position: fixed

可以簡單說fixed是特殊版的absolute，fixed元素總是相對于body定位的。

5、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的定位屬性可以看塊中的文字，顯示的效果如下，可以看到與上面講的一致：

6、sticky

position屬性中最有意思的就是sticky了，設(shè)置了sticky的元素，在屏幕范圍（viewport）時該元素的位置并不受到定位影響（設(shè)置是top、left等屬性無效），當(dāng)該元素的位置將要移出偏移范圍時，定位又會變成fixed，根據(jù)設(shè)置的left、top等屬性成固定位置的效果。

可以知道sticky屬性有以下幾個特點：

該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。當(dāng)元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。亦即如果你設(shè)置了top: 50px，那么在sticky元素到達(dá)距離相對定位的元素頂部50px的位置時固定，不再向上移動。元素固定的相對偏移是相對于離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那么是相對于viewport來計算元素的偏移量

比較蛋疼的是這個屬性的兼容性還不是很好，目前仍是一個試驗性的屬性，并不是W3C推薦的標(biāo)準(zhǔn)。它之所以會出現(xiàn)，也是因為監(jiān)聽scroll事件來實現(xiàn)粘性布局使瀏覽器進(jìn)入慢滾動的模式，這與瀏覽器想要通過硬件加速來提升滾動的體驗是相悖的。

具體情況可以看下圖，基本上可以說這個屬性使用的瀏覽器只有FireFox和iOS的Safari：

簡單的說，要讓sticky屬性生效的條件有以下兩點：

一個是元素自身在文檔流中的位置另一個是該元素的父容器的邊緣

第一點上面已經(jīng)講過了，如果設(shè)置了top: 50px，那么元素在達(dá)到距離頂部50px時才會發(fā)生定位，否則并不會發(fā)生定位。

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

此外還有一點就是父元素的overflow屬性，如果父元素的overflow屬性并不是默認(rèn)的visible屬性，那么sticky元素則相對于該父元素定位。也就是如果要定位在頂部的話，此時這個效果就無效了。。。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論