關(guān)于 position 屬性主要有五個(gè)值：

static relative fixed absolute sticky

常見(jiàn)的就是 relative 和 absolute 這兩個(gè)屬性。

relative 表示，相對(duì)于默認(rèn)位置（即static時(shí)的位置）進(jìn)行偏移，即定位基點(diǎn)是元素的默認(rèn)位置。

absolute 表示，相對(duì)于上級(jí)元素（一般是父元素）進(jìn)行偏移，即定位基點(diǎn)是父元素。

比較復(fù)雜的是 sticky 屬性。

sticky 跟前面屬性值都不一樣，它會(huì)產(chǎn)生動(dòng)態(tài)效果，很像 relative 和 fixed 的結(jié)合：一些時(shí)候是 relative 定位（定位基點(diǎn)是自身默認(rèn)位置），另一些時(shí)候自動(dòng)變成 fixed 定位（定位基點(diǎn)是視口）。

因此，它能夠形成"動(dòng)態(tài)固定"的效果。比如，網(wǎng)頁(yè)的搜索工具欄，初始加載時(shí)在自己的默認(rèn)位置（relative定位）。

頁(yè)面向下滾動(dòng)時(shí)，工具欄變成固定位置，始終停留在頁(yè)面頭部（fixed定位）。

等到頁(yè)面重新向上滾動(dòng)回到原位，工具欄也會(huì)回到默認(rèn)位置。

sticky 生效的前提是，必須搭配 top、bottom、left、right 這四個(gè)屬性一起使用，不能省略，否則等同于 relative 定位，不產(chǎn)生"動(dòng)態(tài)固定"的效果。原因是這四個(gè)屬性用來(lái)定義"偏移距離"，瀏覽器把它當(dāng)作 sticky 的生效門檻。

它的具體規(guī)則是，當(dāng)頁(yè)面滾動(dòng)，父元素開(kāi)始脫離視口時(shí)（即部分不可見(jiàn)），只要與 sticky 元素的距離達(dá)到生效門檻，relative 定位自動(dòng)切換為 fixed 定位；等到父元素完全脫離視口時(shí)（即完全不可見(jiàn)），fixed 定位自動(dòng)切換回 relative 定位。

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

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

上面代碼中，頁(yè)面向下滾動(dòng)時(shí)，#toolbar 的父元素開(kāi)始脫離視口，一旦視口的頂部與 #toolbar 的距離小于 20px（門檻值），#toolbar 就自動(dòng)變?yōu)?fixed 定位，保持與視口頂部 20px 的距離。頁(yè)面繼續(xù)向下滾動(dòng)，父元素徹底離開(kāi)視口（即整個(gè)父元素完全不可見(jiàn)），#toolbar 恢復(fù)成 relative 定位。

大型表格滾動(dòng)的時(shí)候，表頭始終固定，也可以用 sticky 實(shí)現(xiàn)。

CSS 代碼也很簡(jiǎn)單。

th {position: sticky;top: 0; }

需要注意的是，sticky 必須設(shè)在?<th>?元素上面，不能設(shè)在?<thead>?和?<tr>?元素，因?yàn)檫@兩個(gè)元素沒(méi)有 relative 定位，也就無(wú)法產(chǎn)生 sticky 效果。

總結(jié)

以上是生活随笔為你收集整理的position: sticky 属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。