使用 position:sticky 實現粘性布局

CSS 中 position 屬性的取值
{
position: static;
position: relative;
position: absolute;
position: fixed;
position: inherit;
position: initial;
position: unset;
}

sticky 英文字面意思是粘，粘貼，所以姑且稱之為粘性定位。下面就來了解下這個處于實驗性的取值的具體功能及實用場景。

這是一個結合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位，適用于一些特殊場景。

IOS 家族（SAFARI && IOS SAFARI）和 Firefox 很早開始就支持 position:sticky 了。而 Chrome53~55 則需要啟用實驗性網絡平臺功能才行。其中 webkit 內核的要添加上私有前綴 -webkit-。

簡單描述下生效過程，因為設定的閾值是 top:0 ，這個值表示當元素距離頁面視口（Viewport，也就是fixed定位的參照）頂部距離大于 0px 時，元素以 relative 定位表現，而當元素距離頁面視口小于 0px 時，元素表現為 fixed 定位，也就會固定在頂部。

生效規則

position:sticky 的生效是有一定的限制的，總結如下：

須指定 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 是根據元素是否達到設定了的閾值決定的。

當前文章：使用 position:sticky 實現粘性布局
標題URL：http://m.kartarina.com/news41/168691.html

成都網站建設公司_創新互聯，為您提供面包屑導航、電子商務、搜索引擎優化、網站內鏈、營銷型網站建設、網站維護

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯