sticky元素失效主因是滚动上下文被截断：overflow:auto/hidden祖先、height:100vh硬限高、flex/grid拉伸、table-header-group不支持、transform/filter创建新层叠上下文。
sticky元素滚动过父容器后“跟着滑走”，不是它坏了，是它根本没找到能粘的滚动容器——浏览器把它锁死在了错误的祖先层级里。
sticky 的滚动上下文被 overflow: auto/hidden 截断
只要 sticky 元素向上查找到的第一个设置了 overflow: auto、overflow: hidden 或 overflow: clip 的祖先，就会立刻成为它的“滚动边界”。哪怕这个祖先本身没滚动条、高度刚好撑满内容，sticky 也只认它，不会继续往上找 body。
- 用 DevTools 选中 sticky 元素 → Computed 面板 → 点开
overflow，逐层向上看最终计算值是否为auto或hidden - 临时删掉某层祖先的
overflow声明，如果 sticky 恢复了，就定位到问题层 - 修复方式不是“加 overflow”，而是把
overflow: auto移到更外层容器，或用display: flow-root替代
父容器高度硬设导致滚动链断裂
当父容器写了 height: 100vh，它就成了一堵“物理墙”：内部内容再长，容器也不产生滚动，浏览器只能把滚动交给 body。但 sticky 元素还挂在子容器里，锚点错位，滚动时自然“失联”。
- 把
height: 100vh改成min-height: 100vh，允许容器随内容伸展 - 若必须限制高度（如弹窗内列表），改用
max-height: 600px+overflow-y: auto，明确指定滚动容器就是它自己 - 避免
height: 100%—— 它依赖父级高度，容易链式塌陷为height: 0
sticky 元素自身处于 flex/grid 容器中
flex 容器默认 align-items: stretch，会强制子项拉伸填满容器高度，导致 sticky 元素“以为自己一直在视口里”，top 值永远达不到触发条件；grid 中类似，尤其当行高未显式定义时。
- 给 sticky 元素加
align-self: flex-start（flex）或justify-self: start（grid）打破拉伸 - 不要把 sticky 元素放在
flex-direction: column-reverse容器里——规范未定义反向流下的行为 - 表格场景下，
<thead> 是 <code>display: table-header-group，不支持 sticky；需对每个<th> 单独设置 <code>position: sticky; top: 0transform/filter 创建新层叠上下文，悄悄禁用 sticky
哪怕只是给某个祖先加了
transform: translateY(0)或filter: opacity(0.99)，都会创建新层叠上下文，并同步切断 sticky 的滚动绑定链。DevTools 的 Computed 面板里看不出异常，position仍显示sticky，但滚动时毫无反应。- 排查时优先怀疑带
transform、filter、will-change的祖先元素 - 临时注释掉这些样式，观察 sticky 是否恢复
- 如必须使用，可加一层中间 wrapper：
<div style="position: relative"><div class="sticky"></div></div>
真正难调试的，往往不是
overflow: hidden这种显性干扰，而是transform或contain: layout这类静默失效——它们不报错、不警告，只让 sticky 彻底“装死”。动手前先打开 DevTools 的 Computed 面板，从 sticky 元素开始，一层层往上点开overflow、transform、contain的最终值，比猜更可靠。 - 排查时优先怀疑带
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
