sticky不生效八成是祖先元素overflow:hidden/auto/scroll静默拦截；因它们创建新包含块切断滚动链，使sticky退化为static；需逐级检查Computed overflow，用clip-path:inset(0)替代overflow:hidden可修复。
sticky不生效，八成是某个祖先元素的overflow: hidden、overflow: auto或overflow: scroll在静默拦截——不是“没写对”，而是被截断了滚动上下文。
为什么overflow: hidden会让position: sticky完全失效
浏览器规范要求：sticky必须依赖一个“可滚动的包含块”作为锚点；而overflow: hidden（含auto/scroll）会强制创建新的包含块，并切断上层滚动链。哪怕该容器根本没内容溢出、也不滚动，sticky也会退化为static，DevTools里看到的computed position就是static，不是“卡住”，是压根没启动。
常见藏匿位置包括：.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 壳、甚至某些 CSS-in-JS 库注入的隐藏样式。
- 用 DevTools 选中 sticky 元素，逐级点开
parentElement直到body，看每层的Computed → overflow - 临时加
overflow: visible !important到某层父级，如果 sticky 立刻恢复，就定位准了 - 别只查直接父级——爷爷级甚至更高层的
overflow: hidden同样致命
不删overflow: hidden时怎么救活 sticky
有些场景不能动裁剪逻辑（比如圆角卡片防内容穿出、弹窗动画防溢出），硬删会破 UI。这时得绕过限制，而不是硬刚规范。
立即学习“前端免费学习笔记（深入）”；
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新包含块，sticky完全不受影响 - 若必须保留
overflow: auto（如内部有横向滚动表格），就把 sticky 元素提一层：在该容器外套个position: relative的 wrapper，再把 sticky 挂进去 - 极端情况（DOM 结构锁死），可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意 iOS Safari 滚动抖动和节流处理
为什么overflow: auto和overflow: scroll也常导致 sticky 卡住
它们虽能滚动，但 sticky 行为被绑定在该容器内部。如果内容没真正溢出（比如高度刚好、或子项被 height: 100% 压扁），浏览器可能判定“不可滚动”，sticky 就不会触发；更糟的是，它仍把这层当边界，结果 sticky 元素卡在顶部不动，或滚动一段后突然掉回文档流。
- 用 DevTools 的 Layout 面板看该容器的 “Actual height” 是否真大于设定高度
- 给它加
max-height并确保子内容撑高，或显式写overflow-y: auto - 避免用
height: 100vh作 sticky 父容器高度——它会硬性截断滚动范围，应改用min-height: 100vh
其他容易被忽略的干扰项
除了 overflow，还有几个隐蔽因素会让 sticky 看似“随机失效”：
-
transform、filter或will-change会创建新层叠上下文，同样切断 sticky 链；Safari 15.4 之前尤其敏感 - 父容器是
display: inline-flex或inline-grid：inline 级容器不产生 BFC，sticky 直接无效 - sticky 元素自身没设
top/bottom/left/right—— 这不会报错，但等价于position: static - 动态插入的 sticky 元素（如 React
useEffect中 append）可能因渲染时机晚于布局计算，初始不生效
最麻烦的不是单点问题，而是多个限制叠加：比如一个 transform 父容器 + 里面套了个 overflow: hidden 的卡片 + 卡片里又放 sticky 表头——这时候光调一个地方没用，得一层层剥开看。
