iOS Safari中sticky失效主因是祖先元素overflow:hidden/auto/scroll静默禁用，使其退化为static；需逐级检查computed overflow，用clip-path: inset(0)替代或提升DOM层级修复。
iOS Safari 里 position: sticky 不粘，八成不是你写错了，而是被某个祖先元素的 overflow 属性静默禁用了——它不会报错，也不会警告，只会在 DevTools 的 computed 样式里把 position 显示为 static。
为什么 overflow:hidden/auto/scroll 会直接关掉 sticky
sticky 不是独立生效的定位方式，它依赖“最近的、可滚动的块级容器”作为参考边界。而一旦任意祖先（不一定是直接父级）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器自身**没有实际滚动内容**（比如高度固定但内容很短），Safari 就会把它当作 sticky 的“硬边界”，并强制将 sticky 元素降级为 static。
常见藏雷位置包括：
- Modal 外层 wrapper（防内容穿出）
- Card 或 Tab 容器（圆角裁剪常用）
- 微信小程序的
scroll-view（默认带overflow: auto） - CSS-in-JS 注入的隐藏样式（比如防动画溢出的
overflow: hidden）
怎么快速定位是哪个 overflow 在作祟
别猜，用 DevTools 实锤：
立即学习“前端免费学习笔记（深入）”；
- 选中 sticky 元素，打开 Styles 面板，看 computed 下的
position是不是static - 在 Elements 面板里，从该元素开始，逐级点开
parentElement，直到body，挨个检查每个节点的 computedoverflow-x和overflow-y - 特别注意那些没显式写
overflow，但被组件库或框架自动加上的节点（比如 antd Modal、vant Card） - 临时删掉可疑节点的
overflow声明，刷新看 sticky 是否恢复——这是最直接的验证方式
不能删 overflow 时的三个实操替代方案
如果业务强依赖视觉裁剪（比如卡片圆角、防弹窗内容溢出），又不能动结构，有三条路可走：
- 用
clip-path: inset(0)替代overflow: hidden：它能实现完全一样的裁剪效果，但不创建新层叠上下文，也不干扰 sticky 的包含块计算 - 把 sticky 元素提到更高层级：比如移出 Modal 或 Card，塞进一个明确设了
max-height+overflow-y: auto的兄弟容器里 - 改用
position: fixed+IntersectionObserver手动模拟：适合关键导航栏，能绕过所有 iOS 渲染限制，也便于控制触发区域和回弹行为
真正难的不是写对 top，而是找到那个默默加了 overflow: hidden 却没人记得的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。
