position: sticky 失效主因是父容器或祖先元素设置了 overflow: hidden/auto/scroll、transform、filter 或 will-change，导致滚动上下文被截断或层叠上下文中断，浏览器静默退化为 relative 定位。
直接说结论：用 position: sticky 做顶部粘性标题栏，90% 的失败不是因为写错了 CSS，而是父容器悄悄加了 overflow: hidden、transform 或 filter ——浏览器不报错，只默默禁用粘性。
为什么 position: sticky 没反应？常见静默失效原因
它不像 position: fixed 那样“强行固定”，而是依赖滚动上下文和祖先约束。一旦条件不满足，就退化为 position: relative，毫无提示。
- 父元素（或任意上层祖先）设置了
overflow: hidden、overflow: auto或overflow: scroll→ 粘性被截断 - 父元素有
transform（哪怕只是transform: translateZ(0)）、filter、will-change→ 触发新层叠上下文，中断 sticky 行为 - 没写
top（或bottom/left/right）→ 语法不完整，等同于没设position - 标题栏本身被
display: flex父容器压缩了高度（比如没设align-items: flex-start），导致滚动时根本“触不到”阈值
必须写的最小可用代码块
不是“推荐写法”，而是能跑通的底线配置。少一行都可能白忙活：
.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
background: white;
z-index: 100;
}
注意点：
-
top: 0是硬性要求，不能省；想留 10px 间距就写top: 10px -
-webkit-sticky前缀对 Safari 15.4 及更早版本仍是必需的（2026 年仍有不少用户在用） -
z-index不是可选的——若下方内容有z-index，没它就会被盖住 - 别给
.sticky-header加margin-top或padding-top来“模拟吸顶”，会干扰触发位置计算
如何排查粘性被谁拦住了？
打开 DevTools，选中标题栏元素，往上看它的所有祖先节点，在 Styles 面板里逐个检查：
- 有没有
overflow:.*（包括hidden、auto、scroll） - 有没有
transform:、filter:、will-change: - 有没有
contain: layout或contain: paint（也会中断 sticky）
更快速的办法：临时给整个 body 加 overflow: visible !important，再刷新。如果这时粘性生效了，说明问题一定出在某层祖先的 overflow 上。
原位置留白怎么处理？
position: sticky 不会脱离文档流，所以不会留空——这是它和 fixed 的关键区别。但如果你用了 JS fallback（比如监听 scroll 切换 fixed），就必须手动加占位元素，否则页面会“上跳”。
真正容易被忽略的是：当父容器高度刚好卡在粘性元素底部时，它会在到达父底边时突然“松开”并跟随滚动。这不是 bug，是 sticky 的设计逻辑——它只在父容器范围内有效。如果需要全程固定，说明你该用 position: fixed，而不是强行 hack sticky。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
