position: sticky 失效主因是祖先元素 overflow: hidden/auto/scroll 创建新滚动上下文导致锚定失败；可通过 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 彻底退化为 static
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，直到，盯紧每层的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: 600px并让子内容撑高，或显式写overflow-y: auto - 别用
height: 100vh作为 sticky 父容器高度——它会硬性截断滚动范围；改用min-height: 100vh - Flex/Grid 容器里 sticky 失效？补高度约束，并确认没用
align-items: center等导致基准偏移
最隐蔽的失效点往往不在直接父级，而在爷爷级甚至更高层；clip-path: inset(0) 是目前最轻量、兼容性足够、且不影响布局语义的解法，但要注意它不支持 IE —— 如果项目还必须兼容 IE，就得重构 DOM 结构或接受 JS 模拟的维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
