高级前端
css
【Q334】position: sticky 如何工作,适用于哪些场景

position: sticky 如何工作,适用于哪些场景

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 337 (opens in a new tab)

Author 回答者: shfshanyue (opens in a new tab)

position: sticky 可理解为 relativefixed 的结合体

Author 回答者: CsongL (opens in a new tab)

MDN的解释:position: sticky 在正常文档流中仍然保有位置,然后会相对于它的最近的滚动祖先和最近的块级祖先根据 top, left, right, bottom 的值进行偏移。元素偏移不会影响其他任何元素的位置,因为会为该元素创建一个新的层叠上下文,从而不会影响到页面上的其他元素

css-tricks一篇文章的理解:在窗口的管轮向下滚动没有让该元素完全消失前,该元素的表现就与postion:relative的元素相同,之后该元素的表现就类似于position: fixed 的元素, 只不过该元素是相对于离他最近的滚轮祖先

Reference: Docs: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position (opens in a new tab) Code: https://css-tricks.com/almanac/properties/p/position/ (opens in a new tab)