sticky失效主因是祖先overflow:hidden/auto/scroll静默降级为static；需用devtools逐级检查computed overflow值，用clip-path:inset(0)替代或加position:relative wrapper修复。
因为 sticky 元素一旦遇到任意祖先设置了 overflow: hidden、overflow: auto 或 overflow: scroll，浏览器就会按规范静默将其降级为 position: static——不是“没生效”，是根本没进入粘性计算流程。
DevTools 里 computed position 是 static 怎么查
这不是样式没写对，而是浏览器已终止 sticky 行为。打开 DevTools 选中 sticky 元素，在「Computed」面板直接看 position 的最终值：如果是 static，说明已被截断。接着逐级点击左侧 DOM 树里的 parentElement 链接（从元素本身一直点到 body），每跳一层都紧盯 overflow-x 和 overflow-y 的 computed 值。重点标记出值为 hidden、auto、scroll 的节点，尤其那些高度固定、内容明显没撑开的容器（比如 height: 400px 但子项总高才 200px）。
overflow: hidden 不是唯一凶手，auto/scroll 同样危险
overflow: auto 和 overflow: scroll 看似支持滚动，但它们会把 sticky 锚定在该局部容器内，而非整个视口。典型现象是：侧边栏设了 top: 0，却被包在 overflow: auto 的父容器里，结果只在那个区域顶部“粘”一下，一滚出容器边界就立刻掉回文档流。验证关键点有两个：
• 用鼠标滚轮直接对该容器滚动，看是否响应；不响应，说明它根本没形成有效滚动上下文
• 在 DevTools Layout 面板检查 “Actual height” 是否真大于设定高度；若没溢出，sticky 就不会触发
不能删 overflow:hidden 怎么救 sticky
业务上常需要 overflow: hidden 来裁剪圆角图片、防弹窗穿出或配合动画边界，硬删会破 UI。绕过比硬改更稳妥：
• 优先用 clip-path: inset(0) 替代 overflow: hidden：视觉裁剪效果一致，但不创建新 BFC，也不干扰滚动上下文，sticky 链 100% 保留（Chrome 93+、Firefox 97+、Safari 15.4+ 支持）
• 若必须保留 overflow: auto（如表格局部滚动），在外层套一层 position: relative wrapper：
<div style="overflow: auto"> <br><div style="position: relative"> <br><div class="sticky"></div> <br> </div> <br> </div>
• 极端情况（DOM 完全锁死、无法加 wrapper）可用
position: fixed + getBoundingClientRect() 监听 scroll 模拟，但要注意 iOS Safari 滚动抖动和节流处理
最容易被忽略的是：失效层级往往不在直接父级，而在爷爷级甚至更高；CSS-in-JS 库或 UI 框架可能在运行时悄悄注入 overflow: hidden，源码里根本看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
