CSS使用position:sticky實現粘性布局執行個體詳解

來源:互聯網
上載者:User
本文主要和大家介紹CSS使用position:sticky 實現粘性布局的方法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能協助到大家。

簡介

前面寫了一篇文章講解了position常用的幾個屬性:《CSS基礎篇-- position屬性講解》

一般都知道下面幾個常用的:


{position: static;position: relative;position: absolute;position: fixed;}

在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position還說了下面這三個值:


/* 全域值 */position: inherit;position: initial;position: unset;

估計大部分都沒有用過position:sticky吧。這個屬性值還在實驗階段。怎樣描述它呢?

初窺 position:sticky

sticky 英文字面意思是粘,粘貼,所以姑且稱之為粘性定位。下面就來瞭解下這個處於實驗性的取值的具體功能及實用情境。

這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位,適用於一些特殊情境。

什麼是結合兩種定位功能於一體呢?

元素先按照普通文檔流定位,然後相對於該元素在流中的 flow root(BFC)和 containing block(最近的塊級祖先元素)定位。

而後,元素定位表現為在跨越特定閾值前為相對定位,之後為固定定位。

這個特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。

sticky:對象在常態時遵循常規流。它就像是relativefixed的合體,當在螢幕中時按常規流排版,當捲動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。

常用情境:當元素距離頁面視口(Viewport,也就是fixed定位的參照)頂部距離大於 0px 時,元素以 relative 定位表現,而當元素距離頁面視口小於 0px 時,元素表現為 fixed 定位,也就會固定在頂部。

代碼:


{    position: -webkit-sticky;    position: sticky;    top: 0;}

如表現方式:

距離頁面頂部大於20px,表現為 position:relative;

距離頁面頂部小於20px,表現為 position:fixed;

運用 position:sticky 實現頭部導覽列固定

html代碼:


<p class="con">    <p class="samecon">        <h2>標題一</h2>        <p>這是一段文本</p>        <p>這是一段文本</p>        <p>這是一段文本</p>    </p>    <p class="samecon">        <h2>標題二</h2>        <p>這是一段文本</p>        <p>這是一段文本</p>        <p>這是一段文本</p>    </p>    <p class="samecon">        <h2>標題三</h2>        <p>這是一段文本</p>        <p>這是一段文本</p>        <p>這是一段文本</p>    </p>    <p class="samecon">        <h2>標題四</h2>        <p>這是一段文本</p>        <p>這是一段文本</p>        <p>這是一段文本</p>    </p>    <p class="samecon">        <h2>標題五</h2>        <p>這是一段文本</p>        <p>這是一段文本</p>        <p>這是一段文本</p>    </p>    <p class="samecon">        <h2>標題五六</h2>        <p>這是一段文本</p>        <p>這是一段文本</p>        <p>這是一段文本</p>    </p></p>

CSS代碼:


.samecon h2{    position: -webkit-sticky;    position: sticky;    top: 0;    background:#ccc;    padding:10px 0;}

同理,也可以實現側邊導覽列的超出固定。

生效規則

  • 須指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。

    • 並且 top bottom 同時設定時,top 生效的優先順序高,left right 同時設定時,left 的優先順序高。

  • 設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible,否則 position:sticky 不會生效。這裡需要解釋一下:

    • 如果 position:sticky 元素的任意父節點定位設定為 overflow:hidden,則父容器無法進行滾動,所以 position:sticky 元素也不會有滾動然後固定的情況。

    • 如果 position:sticky 元素的任意父節點定位設定為 position:relative | absolute | fixed,則元素相對父元素進行定位,而不會相對 viewprot 定位。

  • 達到設定的閥值。這個還算好理解,也就是設定了 position:sticky 的元素表現為 relative 還是 fixed 是根據元素是否達到設定了的閾值決定的。相容性

這個屬性的相容性還不是很好,目前仍是一個實驗性的屬性,並不是W3C推薦的標準。
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.