overflow:hidden会令sticky降级为static，因浏览器要求sticky必须锚定在可滚动包含块上；若祖先设overflow:hidden/auto/scroll且自身不可滚动，则静默禁用sticky逻辑。
overflow: hidden 会让 sticky 直接变成 static
不是“粘不住”，是浏览器压根没启动 sticky 逻辑。只要任意祖先（不一定是直接父级）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该祖先自身不可滚动（比如高度固定、内容没溢出），浏览器就会按规范静默将 sticky 元素降级为 position: static。
你在 Styles 面板看到 position: sticky 没用——关键看 Computed 面板里的 position 值。如果是 static，说明粘性链已被截断。
- 常见藏雷位置：
.ant-modal、.card、Tab 切换 wrapper、Swiper 根节点、CSS-in-JS 动态注入的内联overflow - 临时验证：给疑似父级加
overflow: visible !important，sticky 立刻恢复，就锁定了问题层 - 注意：不是必须“滚动才生效”，而是该祖先必须构成一个“可滚动上下文”；如果它自己不滚动，sticky 就失去锚定目标
为什么 overflow: auto/scroll 也危险
overflow: auto 和 overflow: scroll 同样会创建新滚动上下文，但 sticky 元素会被强制锚定在这个局部容器内，而不是整个视口。结果就是：只在那个区域里“粘”，超出容器边界就回归文档流。
典型现象：侧边栏设了 position: sticky; top: 0，却被包在 overflow: auto 的父容器里，它就只能粘在父容器内部，而非页面左侧。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：鼠标直接滚该容器，看是否响应；不响应，说明它根本没形成有效滚动上下文
- Flex/Grid 父容器若没设
height、max-height或min-height，即使子项撑高了，浏览器也可能无法识别出可滚动区域 -
height: 100vh+overflow: auto是高危组合：容器高度刚好，内容没溢出 → 实际无滚动 → sticky 不触发
不能删 overflow 时怎么救 sticky
业务上常不能删 overflow: hidden——比如裁圆角图片、防弹窗穿出、约束卡片尺寸。硬删会破 UI，得绕过限制。
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新 BFC，sticky 链完整保留 - 把 sticky 元素提到更高层级，挂到一个
position: relative且overflow: visible的 wrapper 下 - 若 DOM 结构锁死，可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意视口缩放、重排和性能损耗 -
overflow: clip是现代替代方案（Chrome 93+、Firefox 97+），它不创建新 containing block，但兼容性不如clip-path
其他容易被忽略的干扰项
除了 overflow，还有几个属性会悄悄切断 sticky 锚定链，尤其在动态渲染或框架封装场景下极易踩坑。
-
transform（哪怕只是translateZ(0)）、filter、will-change、opacity ：都会创建新层叠上下文，iOS Safari 15.4 之前尤其敏感 - 父级是
display: inline-flex或inline-grid：inline 级容器不产生 BFC，sticky 直接被忽略 - sticky 元素自身设了
float或是position: absolute/fixed的子元素：sticky 被强制忽略 - Flex 容器设了
align-items: center：会偏移 sticky 元素的“顶部基准线”，导致top: 0失效，需显式加align-self: flex-start
position: sticky，而是某一层看不见的 overflow 或 transform —— 它们不会报错，也不会警告，只会在 Computed 面板里悄悄把 position 变成 static。 
