最近有點忘了position幾個取值的內容,在這裏簡單總結一下。html
position的含義是指定位類型,取值類型能夠有:static、relative、absolute、fixed、inherit和sticky,這裏sticky是CSS3新發布的一個屬性。瀏覽器
一、position: static佈局
static(沒有定位)是position的默認值,元素處於正常的文檔流中,會忽略left、top、right、bottom和z-index屬性。spa
二、position: relative3d
relative(相對定位)是指給元素設置相對於本來位置的定位,元素並不脫離文檔流,所以元素本來的位置會被保留,其餘的元素位置不會受到影響。code
三、position: absolutehtm
absolute(絕對定位)是指給元素設置絕對的定位,相對定位的對象能夠分爲兩種狀況:對象
1) 設置了absolute的元素若是存在有祖先元素設置了position屬性爲relative或者absolute,則這時元素的定位對象爲此已設置position屬性的祖先元素。blog
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屬性有如下幾個特色:
比較蛋疼的是這個屬性的兼容性還不是很好,目前還是一個試驗性的屬性,並非W3C推薦的標準。它之因此會出現,也是由於監聽scroll
事件來實現粘性佈局使瀏覽器進入慢滾動的模式,這與瀏覽器想要經過硬件加速來提高滾動的體驗是相悖的。
具體狀況能夠看下圖,基本上能夠說這個屬性使用的瀏覽器只有FireFox和iOS的Safari:
簡單的說,要讓sticky屬性生效的條件有如下兩點:
第一點上面已經講過了,若是設置了top: 50px,那麼元素在達到距離頂部50px時纔會發生定位,不然並不會發生定位。
第二點則須要考慮父容器的高度狀況:sticky元素在到達父容器的底部時,則不會再發生定位,若是父容器高度並無比sticky元素高,那麼sticky元素一開始就達到了底部,並不會有定位的效果。
此外還有一點就是父元素的overflow屬性,若是父元素的overflow屬性並非默認的visible屬性,那麼sticky元素則相對於該父元素定位。也就是若是要定位在頂部的話,此時這個效果就無效了。。。