position: sticky 失效主因是祖先元素的 overflow: hidden/auto/scroll 创建了新滚动上下文，使 sticky 锚定失败；可通过 DevTools 检查 computed position 是否为 static，用 clip-path: inset(0) 替代 overflow 或提升元素层级修复。
position: sticky 失效，八成不是你漏写了 top，而是某个祖先元素的 overflow: hidden、overflow: auto 或 overflow: scroll 在静默截断滚动上下文——sticky 元素被“锁死”在容器内，浏览器直接把它当成了 position: static。
为什么 overflow: hidden 会让 position: sticky 彻底退化
sticky 不是吸在视口边缘，它必须锚定在一个「可滚动的包含块」上才能触发。而 overflow: hidden（含 auto/scroll）会强制创建新的包含块和滚动上下文边界。只要该祖先自身不滚动（比如高度固定、内容没撑开），浏览器就判定“这里没滚动”，sticky 就不会启动，计算值永远是 static。
常见藏雷位置包括：.ant-modal 外层 wrapper、.card 根节点、Tab 切换容器、Swiper 轮播壳、甚至 CSS-in-JS 动态注入的内联 overflow: hidden。
- 用 DevTools 选中 sticky 元素 → 打开「Computed」面板 → 看
position是否始终为static - 逐级点击左侧 DOM 树里的
parentElement，直到<body>，盯紧每层的overflow-x和overflow-y计算值 - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
不删 overflow: hidden 怎么让 sticky 继续工作
业务上常需要 overflow: hidden 来裁剪圆角图片、防止弹窗内容穿出或配合动画效果，不能硬删。绕过规范限制比硬改 DOM 更稳妥：
立即学习“前端免费学习笔记（深入）”；
- 用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果一致，但不创建新 BFC，sticky 链保持完整（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：在带
overflow的容器外，套一个position: relative的 wrapper，再把 sticky 元素挂进去 - 极端情况（DOM 完全锁死）可用
position: fixed+getBoundingClientRect()监听scroll模拟，但要注意 iOS Safari 滚动抖动和节流处理
overflow: auto 和 overflow: scroll 也常导致 sticky 卡住
它们虽能滚动，但 sticky 行为会被绑定在该容器内部。如果内容没真正溢出（比如高度刚好、子项被 height: 100% 压扁），浏览器可能判定“不可滚动”，sticky 就不会触发；更糟的是，它仍把这层当边界，结果元素卡在顶部不动，或滚动一段后突然掉回文档流。
- 用 DevTools 的 Layout 面板看该容器的 “Actual height” 是否真大于设定高度
- 给它加
max-height并确保子内容撑高，或显式写overflow-y: auto - 避免用
height: 100vh作为 sticky 父容器高度——它会硬性截断滚动范围，应改用min-height: 100vh - 检查父级是否用了
transform、filter或will-change：这些会触发层叠上下文，切断粘性锚定链
最容易被忽略的点是：问题层未必是直接父级，可能是爷爷级甚至更高层；clip-path: inset(0) 虽好，但在 Safari 15.4 之前不支持；iOS Safari 对 sticky 的兼容性依然脆弱，哪怕样式完全合规，也可能滚动卡顿或突然跳回——别只测 Chrome。
