position: sticky不触发八成是祖先元素overflow:hidden/auto/scroll拦截；因其会创建新滚动容器，若该容器自身不滚动，sticky即被规范降级为static。
position: sticky 不触发，八成是某个祖先元素的 overflow: hidden、overflow: auto 或 overflow: scroll 在拦截，而不是你漏写了 top。
为什么 overflow: hidden 会让 position: sticky 完全静默失效
sticky 的行为必须锚定在一个“可滚动的包含块”上计算粘住边界。一旦任意祖先（不一定是直接父级）设置了 overflow: hidden、auto 或 scroll，它就立刻成为 sticky 元素的最近滚动容器——但若该容器自身不滚动（比如高度固定、内容没溢出、或被 height: 100vh 锁死），浏览器就会悄悄把 sticky 元素降级为 position: static。
这不是 bug，是规范行为：你能在 DevTools 的 Computed 面板里看到 position: static，哪怕样式表里明明白白写了 position: sticky; top: 0。
- 常见藏雷位置：
.ant-modal、.card、Tab 切换外层 wrapper、Swiper 根节点、CSS-in-JS 动态注入的内联overflow - 不要只查直接父级；有时是爷爷级甚至
body上某层 class 悄悄加了overflow: hidden - 临时验证方法：给疑似父级加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
必须保留 overflow: hidden 时怎么救活 sticky
业务上常不能删 overflow: hidden——比如要裁圆角图片、防动画穿出、或框架强制要求。硬删会破 UI，得换思路。
立即学习“前端免费学习笔记（深入）”；
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新块格式化上下文（BFC），sticky 链保持完整 - 把 sticky 元素提一层：移到该
overflow容器外部，挂到一个position: relative且overflow: visible的更高层级 wrapper 下 - 若 DOM 结构锁死无法改，可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意视口缩放、页面重排和性能损耗
其他容易被忽略的 overflow 相关陷阱
overflow: auto 和 scroll 同样危险，尤其当它们“看起来能滚，其实没滚”时：
- 容器设了
height: 100vh+overflow: auto，但子内容高度不足，实际无滚动发生 → sticky 不触发 - Flex/Grid 父容器没设
height或max-height，又用了align-items: center，导致 sticky 元素的“顶部基准线”偏移，top: 0失效 - 父级是
display: inline-flex或inline-grid：inline 级容器不产生 BFC，sticky 直接被忽略 - 父容器加了
transform、filter或will-change：这些属性会创建新层叠上下文，切断 sticky 对视口的参考关系
真正难的不是写对 top，而是找到那个躲在 DOM 树深处、默默加了 overflow: hidden 的“真凶”。它可能来自组件库默认样式、CSS-in-JS 运行时注入、甚至一行被遗忘的内联 style。逐级检查 computed overflow 值，比反复调 top 值有用得多。
