點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！

前言

如果問，CSS 中 position 屬性的取值有幾個？

大部分人的回答是，大概是下面這幾個吧？

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

sticky 英文字面意思是粘，粘貼，所以姑且稱之為粘性定位。下面就來了解下這個處於實驗性的取值的具體功能及適用場景。這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位，適用於一些特殊場景。

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

元素先按照普通文檔流定位，然後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而後，元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。

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

兼容性

講述具體示例之前，還是很有必要了解一下 position:sticky 的兼容性，除了IE以外了，其他新版瀏覽器都是Ok的，當然，很多老瀏覽器都是不行的。[CSS兼容性查詢網址](https://www.caniuse.com)

如何運用position:sticky實現粘性佈局？

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

position:sticky 示例

看看下面這張 GIF 圖，想想要實現的話，使用 JS + CSS 的方式該如何做？

如何運用position:sticky實現粘性佈局？

按照常規做法，大概是監聽頁面 scroll 事件，判斷每一區塊距離視口頂部距離，超過了則設定該區塊 position:fixed，反之去掉。

而使用 position:sticky ，則可以非常方便的實現

 
Javan的博客

 
今日頭條

 
慕課網

 
Sticky

.container {
 background: #eee;
 width: 600px;
 height: 1000px;
 margin: 0 auto;
}
.sticky-box {
 position: -webkit-sticky;
 position: sticky;
 height: 60px;
 margin-bottom: 50px;
 background: #10af7e;
 top: 0px;
}
div {
 font-size: 30px;
 text-align: center; 

 color: #fff;
 line-height: 60px;
}

只需要給每個內容塊添加`position: -webkit-sticky;position: sticky;`就可以輕鬆實現了。

注意

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

1. 須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。並且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高。

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

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

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

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

公告

閱讀更多 web秀 的文章

關鍵字: 0verflow WebKit Safari