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

  最近有點忘了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屬性有如下幾個特色:

  • 該元素並不脫離文檔流,仍然保留元素本來在文檔流中的位置。
  • 當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即若是你設置了top: 50px,那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定,再也不向上移動。
  • 元素固定的相對偏移是相對於離它最近的具備滾動框的祖先元素,若是祖先元素都不能夠滾動,那麼是相對於viewport來計算元素的偏移量

  比較蛋疼的是這個屬性的兼容性還不是很好,目前還是一個試驗性的屬性,並非W3C推薦的標準。它之因此會出現,也是由於監聽scroll事件來實現粘性佈局使瀏覽器進入慢滾動的模式,這與瀏覽器想要經過硬件加速來提高滾動的體驗是相悖的。

  具體狀況能夠看下圖,基本上能夠說這個屬性使用的瀏覽器只有FireFox和iOS的Safari:

  簡單的說,要讓sticky屬性生效的條件有如下兩點:

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

  第一點上面已經講過了,若是設置了top: 50px,那麼元素在達到距離頂部50px時纔會發生定位,不然並不會發生定位。

  第二點則須要考慮父容器的高度狀況:sticky元素在到達父容器的底部時,則不會再發生定位,若是父容器高度並無比sticky元素高,那麼sticky元素一開始就達到了底部,並不會有定位的效果。

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

相關文章
相關標籤/搜索