網站首頁編程語言正文

通過CSS的sticky屬性重新回顧 position

作者：bangleilei 更新時間： 2022-04-23 編程語言

前言：依稀記得剛學習前端找工作問過我一個面試題，css的position的屬性有幾種，我回答的是

absolute

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed

生成絕對定位的元素，相對于瀏覽器窗口進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative

生成相對定位的元素，相對于其正常位置進行定位。

因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

還有一種沒有回答出來，

static

默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

自此之后我就堅定的認為 position 有四種屬性。

這其實只是 css2 的position 的四種屬性? 也是最常用且兼容性最好的四種屬性。

position 在css3中增加了三種屬性?

inherit	此屬性是繼承祖父級定位，祖父標簽為absolute，它就會為absolute，祖父標簽為relative，它就會為 relative，祖父為fixed、static等亦如此。
sticky	這個屬性尷尬的一批，基本瀏覽能兼容的寥寥無幾，ie,operaMINI 全軍覆沒，firefox 26以上，chrome 6.1以上…但是，我們也需要知道它。它是粘貼定位，用于一些特殊場景如：固定頭部元素，向上滾動超出距離不消失。指定top、left、right、bottom 其中一個闕值生值，粘貼定位才會生效，否則，它的行為等同一個相對定位。它的解釋是，監聽頁面的srcoll 事件，當元素超過視圖區塊頂部、左邊、右邊、下邊距離后，添加 fixed，反之，則去掉。注意：1.優先級：top>left>right>bottom。 2. 祖父元素必須設置 overflow: visible。
unset	是inital 和inherit的結合，設置在 top、left、right、bottom 上，意思是當屬性值為可繼承元素，那它等同于 inherit，非可繼承元素，則等同于 inital。

1.需求

很常規的一個需求，移動端的頁面分多個模塊，每個模塊有一個title ，在頁面向上滾動到對應模塊時，title固定在頭部。如圖

之前實現方式是監聽頁面滾動，當頁面滾動到指定區域時把對應的title設置成fixed。非常的麻煩

2.實現

一行樣式就完成了? 可以說是非常的銀杏。

總結：復習下position用法。

原文鏈接：https://blog.csdn.net/banglei123/article/details/116017516