极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

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

Issue

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

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

Author

回答者: CsongL (opens new window)

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 Code: https://css-tricks.com/almanac/properties/p/position/

Last Updated: 2/23/2022, 11:56:07 AM