關于 position 屬性主要有五個值：

static relative fixed absolute sticky

常見的就是 relative 和 absolute 這兩個屬性。

relative 表示，相對于默認位置（即static時的位置）進行偏移，即定位基點是元素的默認位置。

absolute 表示，相對于上級元素（一般是父元素）進行偏移，即定位基點是父元素。

比較復雜的是 sticky 屬性。

sticky 跟前面屬性值都不一樣，它會產生動態效果，很像 relative 和 fixed 的結合：一些時候是 relative 定位（定位基點是自身默認位置），另一些時候自動變成 fixed 定位（定位基點是視口）。

因此，它能夠形成"動態固定"的效果。比如，網頁的搜索工具欄，初始加載時在自己的默認位置（relative定位）。

頁面向下滾動時，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。

等到頁面重新向上滾動回到原位，工具欄也會回到默認位置。

sticky 生效的前提是，必須搭配 top、bottom、left、right 這四個屬性一起使用，不能省略，否則等同于 relative 定位，不產生"動態固定"的效果。原因是這四個屬性用來定義"偏移距離"，瀏覽器把它當作 sticky 的生效門檻。

它的具體規則是，當頁面滾動，父元素開始脫離視口時（即部分不可見），只要與 sticky 元素的距離達到生效門檻，relative 定位自動切換為 fixed 定位；等到父元素完全脫離視口時（即完全不可見），fixed 定位自動切換回 relative 定位。

請看下面的示例代碼。（注意，除了已被淘汰的 IE 以外，其他瀏覽器目前都支持 sticky。但是，Safari 瀏覽器需要加上瀏覽器前綴-webkit-。）

#toolbar {position: -webkit-sticky; /* safari 瀏覽器 */position: sticky; /* 其他瀏覽器 */top: 20px; }

上面代碼中，頁面向下滾動時，#toolbar 的父元素開始脫離視口，一旦視口的頂部與 #toolbar 的距離小于 20px（門檻值），#toolbar 就自動變為 fixed 定位，保持與視口頂部 20px 的距離。頁面繼續向下滾動，父元素徹底離開視口（即整個父元素完全不可見），#toolbar 恢復成 relative 定位。

大型表格滾動的時候，表頭始終固定，也可以用 sticky 實現。

CSS 代碼也很簡單。

th {position: sticky;top: 0; }

需要注意的是，sticky 必須設在?<th>?元素上面，不能設在?<thead>?和?<tr>?元素，因為這兩個元素沒有 relative 定位，也就無法產生 sticky 效果。

總結

以上是生活随笔為你收集整理的position: sticky 属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。