移动端sticky失效主因是祖先元素overflow:hidden/auto/scroll静默截断滚动上下文，致其退化为static；需逐级检查Computed中overflow值，用clip-path:inset(0)替代overflow:hidden或提升sticky元素层级。
移动端 sticky 失效，几乎从不因为 top 没写对，而是被祖先元素“静默拦截”——iOS Safari 和多数安卓 WebView 会直接把 position: sticky 当作 static 处理，连尝试吸附都不会发生。
祖先元素 overflow 静默截断滚动上下文
只要 sticky 元素向上任意一层（哪怕隔了 4 层）的祖先设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器当前不可滚动（比如高度固定、内容未溢出），sticky 就会被强制关掉。
- 典型现象：DevTools 的 Computed 面板里
position值始终显示为static，哪怕写了top: 0 - 重点排查 UI 框架封装层：
scroll-view（小程序）、.ant-modal-body（Ant Design）、Swiper 外层 wrapper - 临时验证：给可疑父节点加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
Flex/Grid 父容器不自动创建可滚动上下文
Flex 或 grid 容器本身不自动产生滚动上下文，Safari 对“可滚动区域”的判定更苛刻：必须同时满足主轴方向明确 + 可滚动空间存在 + 基线稳定，缺一不可。
- 给 flex 父容器加
flex-direction: column+overflow-y: auto（不能只写overflow: auto） - 显式设
max-height或height，例如max-height: 500px；仅靠min-height: 100vh不够，iOS Safari 中vh会随地址栏显隐抖动 - 加
align-items: flex-start，避免stretch或baseline干扰“进入视口”的判定 - 绝对别用
display: inline-flex或display: inline-grid——它们不创建 BFC，sticky 直接被规范忽略
必须保留 overflow: hidden 时怎么绕过限制
很多场景下裁剪是刚需（圆角卡片、弹窗防穿出、动画边界控制），硬删 overflow: hidden 会破 UI。这时不该改 overflow，而该换锚点或换裁剪方式。
立即学习“前端免费学习笔记（深入）”；
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果完全一致，但不创建新 BFC，sticky 行为 100% 保留（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：比如从
.card内部提到外层明确设了overflow-y: auto的容器下，或挂到body下（注意z-index和布局影响） - 慎用
transform、filter、will-change：它们会在爷爷级就创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是视口
最易被忽略的是：失效不是渲染失败，而是浏览器在样式计算阶段就决定不启用 sticky 行为——你看到的 position: static 是最终结果，不是 bug，是规范执行。
