CSS 粘性定位在多滚动容器中的失效原因与修正

用户1839651

发布于 2026-10-01 08:32:25

420

概述

在后台管理界面或者移动端页面中，经常会出现一个主内容区域内部再嵌套一个独立滚动容器，然后在容器顶部使用 position: sticky 实现吸顶效果。这个场景本身很常见，但真正写起来却容易失败：元素在预期位置没有粘住，或者粘住后立刻被滚走。粘性定位的生效条件比 position: fixed 更隐蔽，它不仅依赖 top 等阈值，还依赖最近的滚动祖先。如果父级意外创建了新的滚动容器，或者祖先上有

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

CSS 粘性定位在多滚动容器中的失效原因与修正

CSS 粘性定位在多滚动容器中的失效原因与修正

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐