position: sticky在overflow:hidden祖先中退化为static是规范行为，因其依赖最近可滚动包含块，而overflow:hidden创建新滚动上下文但自身不可滚动，导致sticky无法触发；需用DevTools逐级检查overflow值，优先以clip-path:inset(0)替代修复。
position: sticky 在设置了 overflow: hidden 的祖先容器中失效，不是 bug，是规范行为：浏览器直接把它降级为 position: static，连“尝试粘”的机会都不给。
为什么 overflow: hidden 会让 position: sticky 彻底退化为 static
sticky 不锚定在视口，而是依赖「最近的、可滚动的块级包含块」。而 overflow: hidden（包括 auto、scroll）会强制创建新的包含块和滚动上下文边界——只要这个祖先自身不滚动（比如高度固定、内容没撑开、被 height: 100vh 截断），浏览器就判定“这里没滚动”，sticky 就不会触发。
- DevTools 的 Computed 面板里
position始终显示static，不是样式没生效，是根本没进入 sticky 计算流程 - 失效层级常不在直接父级，而在爷爷级甚至更高层：比如
.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 轮播壳 - CSS-in-JS 库或 UI 框架可能在运行时悄悄注入
overflow: hidden，源码里根本看不到
怎么快速定位是哪一层 overflow 在作怪
别猜，用 DevTools 实锤：
- 选中 sticky 元素 → 打开「Computed」面板 → 看
position是否始终为static - 逐级点击左侧 DOM 树里的
parentElement，直到<body>，盯紧每层的overflow-x和overflow-y计算值 - 重点标记值为
hidden、auto、scroll的节点，尤其是那些高度固定、内容明显没撑开的容器 - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，就锁定了问题层
不删 overflow: hidden 怎么让 sticky 继续工作
业务上常需要它裁剪圆角、防弹窗穿出、保动画边界，硬删会破 UI。绕过比硬改更稳妥：
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果一致，但不创建新 BFC、不干扰滚动上下文，sticky 行为 100% 保留（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 若必须保留
overflow: auto（如弹窗内局部滚动表格），给 sticky 元素套一层position: relativewrapper：<div style="overflow: auto"> <div style="position: relative"> <div class="sticky"></div> </div> </div> - 极端情况（DOM 完全锁死、无法加 wrapper）可用
position: fixed+getBoundingClientRect()监听 scroll 模拟，但要注意 iOS Safari 滚动抖动和节流处理
top: 0 上，而藏在某个你从没点开过、甚至没写过 CSS 的祖先节点里。每次 sticky 失效，第一反应不该是“我是不是漏写了 top”，而是打开 DevTools，往上点五层。 
