overflow:hidden/auto/scroll会强制创建新滚动上下文，若该祖先自身不可滚动，浏览器依规范静默将sticky降级为static，computed面板中position值即为static。
overflow 会让 sticky 完全退化为 position: static，不是“粘不住”，是浏览器压根没启动 sticky 逻辑——你写的 position: sticky 在 Styles 面板里看着正常，但 Computed 面板里 position 值已经是 static。
为什么 overflow:hidden/auto/scroll 会让 sticky 变成 static
sticky 必须锚定在“最近的可滚动包含块”上才能计算吸附位置。而 overflow: hidden、overflow: auto、overflow: scroll 都会强制创建新的包含块（BFC）和滚动上下文边界。只要这个祖先自身不可滚动（比如高度固定、内容没溢出、或被 height: 100vh 截断），浏览器就判定“这里没滚动能力”，直接静默降级为 static。
这不是 bug，是 CSS 规范行为。常见藏雷位置包括：.ant-modal、.card、Tab 切换 wrapper、Swiper 根节点、CSS-in-JS 动态注入的内联 overflow: hidden。
- 失效层级常不在直接父级，而在爷爷级甚至更高；DevTools 里看到
position: static就说明已被截断 -
overflow: auto和overflow: scroll同样危险：哪怕容器“看起来能滚”，如果实际没内容溢出、鼠标滚它没响应，sticky 就不会触发 -
overflow: clip（Chrome 93+、Firefox 97+）也会创建新 containing block，同样导致降级
怎么快速定位是哪一层 overflow 在作怪
别猜，用 DevTools 实锤：
- 选中 sticky 元素，在「Computed」面板里直接看
position的最终值——如果是static，说明已失效 - 逐级点击左侧 DOM 树中的
parentElement，从元素本身一直点到，每点一层都盯紧overflow-x和overflow-y的 computed 值 - 重点标记值为
hidden、auto或scroll的节点，尤其注意那些height固定、子内容明显没撑开的容器 - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，问题层就锁定了
不能删 overflow 时怎么救活 sticky
业务上常需要 overflow: hidden 裁圆角、防弹窗穿出、约束卡片尺寸，硬删会破 UI。绕过方案有三个：
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果一致，但不创建新 BFC，sticky 链完整保留（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提到更高层级，挂到一个
position: relative且overflow: visible的 wrapper 下——DOM 结构允许时最稳妥 - 若结构完全锁死，可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意 iOS Safari 滚动抖动、视口缩放和节流性能损耗
其他容易被忽略的干扰项
除了 overflow，还有几个隐蔽但高频的坑：
- 父级设了
transform（哪怕只是translateZ(0)）、filter、will-change或opacity ，会创建新层叠上下文，切断 sticky 锚定链（Safari 尤其敏感） - Flex/Grid 父容器没设
height、max-height或min-height，即使子项撑高了，浏览器也可能无法识别出“可滚动区域” - 父级是
display: inline-flex或inline-grid：inline 级容器不产生 BFC，sticky 直接被忽略 - sticky 元素自身没写
top或bottom（至少其一），等同于没启用；写了top: auto或top: unset也会退化为static
真正麻烦的不是 overflow 本身，而是它常由框架、CSS-in-JS 或动态 class 在运行时悄悄注入，你根本看不到源码里写了它——必须靠 Computed 面板逐层实锤，而不是凭经验跳过爷爷级节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
