position: sticky 会因祖先元素设置 overflow: hidden/auto/scroll 而被浏览器静默降级为 static，因其依赖可滚动的块级容器，而此类 overflow 会创建新包含块并阻断滚动上下文。
因为父级（或任意祖先）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，浏览器会静默将 position: sticky 元素降级为 position: static——它根本没启动，不是卡住，也不是延迟。
为什么 overflow 会让 sticky 彻底退化为 static
sticky 不是吸在视口，它必须锚定在一个“可滚动的块级容器”里。而 overflow: hidden（含 auto/scroll）会强制创建新的包含块和滚动上下文边界。只要该祖先自身不滚动（比如高度固定、内容没撑开、或被 height: 100vh 截断），浏览器就判定“这里没滚动”，直接把 sticky 元素当 static 处理。
- DevTools 的「Styles」面板仍显示你写的
position: sticky，但「Computed」里position值已是static - 常见藏雷位置：UI 框架的
.ant-modal外层 wrapper、.card根节点、Swiper 轮播壳、Tab 切换容器 - CSS-in-JS 库可能在运行时悄悄注入
overflow: hidden（比如防圆角溢出），源码里根本看不到
怎样快速定位是哪一层 overflow 在拦截
别猜，用 DevTools 实锤：
- 选中 sticky 元素 → 打开「Computed」面板 → 看
position是否始终为static - 点击左侧 DOM 树中的
parentElement链接，逐层向上跳，直到，每层都盯紧overflow-x和overflow-y的计算值 - 重点标记值为
hidden、auto、scroll的节点，尤其是那些高度固定、内容明显没撑开的容器 - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，就锁定了问题层
不能删 overflow: hidden 怎么让 sticky 继续工作
业务上常需要 overflow: hidden 来裁剪圆角图片、防止弹窗内容穿出、约束卡片尺寸。硬删会破 UI，得绕过限制：
立即学习“前端免费学习笔记（深入）”；
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果一致，但不创建新包含块、不干扰滚动上下文，sticky 行为 100% 保留（Chrome 93+、Firefox 97+、Safari 15.4+ 已全覆盖） - 把 sticky 元素提一层：在带
overflow的容器外，套一个position: relative的 wrapper，再把 sticky 元素挂进去 - 若 DOM 完全锁死，可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意 iOS Safari 滚动抖动和节流处理
真正容易被忽略的点是：失效层级往往不在直接父级，而在爷爷级甚至更高；且 transform、filter、will-change 这类触发层叠上下文的属性，也会切断粘性锚定链——哪怕只写了个 transform: translateZ(0)，都可能让 sticky 彻底失灵。
