sticky失效主因是祖先元素overflow:hidden/auto/scroll静默截断滚动上下文，致其降级为static；需用DevTools逐级检查overflow-x/y计算值，以clip-path:inset(0)替代overflow:hidden或提升DOM层级修复。
sticky 失效，八成不是你漏写了 top，而是某个祖先元素的 overflow: hidden、overflow: auto 或 overflow: scroll 在静默截断滚动上下文——浏览器直接把它当 position: static 处理，连触发逻辑都不走。
用 DevTools 快速定位是哪层 overflow 在作怪
别靠猜，靠实锤：
- 选中 sticky 元素 → 打开「Computed」面板 → 看
position是否始终为static - 逐级点击左侧 DOM 树里的
parentElement，直到，每点一层都盯紧overflow-x和overflow-y的计算值 - 重点标记值为
hidden、auto、scroll的节点，尤其是那些高度固定、内容明显没撑开的容器（比如.ant-modal-wrapper、.card、Tab 切换根节点） - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
必须保留 overflow: hidden 时怎么救活 sticky
硬删会破 UI：圆角被撑出、弹窗内容穿出、动画溢出……这些都不是样式问题，是真实业务约束。绕过比硬改更稳妥：
-
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果完全一致，但不创建新 BFC，也不干扰滚动上下文，sticky行为 100% 保留（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：在带
overflow的容器外，套一个position: relative的 wrapper，再把 sticky 元素挂进去——它就跳出了那个“有毒”的 containing block - 避免用
overflow: clip：虽然语义更准确，但它和hidden一样会切断 sticky 锚定链
overflow: auto/scroll 为什么也常让 sticky 卡住
它们能滚动，但 sticky 行为会被绑定在该容器内部，而不是视口。问题往往出在“假可滚动”：
- 容器设了
height: 100%，但子项被flex: 1或grid-area压扁，实际内容没溢出 → 浏览器判定“不可滚动”，sticky 不触发 - 用 DevTools 的 Layout 面板看该容器的 “Actual height” 是否真大于设定高度；若等于设定值，sticky 就不会启动
- 表格内使用 sticky 表头时，
自身不产生 BFC，需在外层加
position: relative+overflow: auto的 wrapper，再把 sticky放进 wrapper 内部 真正棘手的不是写错样式，而是那个
overflow: hidden可能来自 Ant Design 的 modal、Swiper 的壳、甚至 CSS-in-JS 运行时注入的内联样式——它不在你的源码里，却实实在在锁死了 sticky 链。定位时务必查到，别停在直接父级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
