删掉overflow:hidden就恢复sticky是因为Safari将该祖先视为粘性边界并静默降级为static；不能真删是因需防内容穿出、保圆角等视觉约束，应改用clip-path:inset(0)替代，它裁剪但不干扰sticky。
sticky 在 iOS Safari 下不粘，八成是某个祖先元素的 overflow: hidden（或 auto/scroll）在静默拦截，不是 bug，是 Safari 的硬性限制。
为什么删掉 overflow: hidden 就好了，但不能真删？
只要 sticky 元素的任意一个祖先（哪怕隔了三层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器自身不滚动（例如高度固定、内容未溢出），Safari 就会把它当作“粘性边界”，并强制将 sticky 元素降级为 position: static——DevTools 里看到的 computed position 就是 static，不是“没生效”，是被截断了。
常见藏雷位置包括：Modal 外层 wrapper、Card 容器、Tab 切换根节点、轮播图父级、CSS-in-JS 注入的隐藏滚动条样式。它们常默认加 overflow: hidden 防穿出或裁圆角，却顺手废掉了子级 sticky。
- 临时排查：在 DevTools 中选中 sticky 元素，逐级向上看「Computed」面板里的
overflow-x和overflow-y，重点找值为hidden、auto或scroll的祖先 - 验证定位：临时删掉可疑祖先的
overflow声明，观察 sticky 是否立刻恢复 - 不能删的原因：比如防动画溢出、保持圆角视觉一致性、避免内容穿出弹窗等，都是真实业务约束
不删 overflow: hidden 怎么保住 sticky？
用 clip-path: inset(0) 替代 overflow: hidden 是最轻量、兼容性最好的方案。它能实现完全相同的视觉裁剪效果（如圆角图片、防穿出），但不会创建新的滚动上下文或层叠上下文，sticky 行为完全不受影响。
立即学习“前端免费学习笔记（深入）”；
-
clip-path: inset(0)在 Safari 13.1+、iOS Safari 13.4+ 全面支持，2026 年已无兼容顾虑 - 不要写成
clip-path: inset(0px)（带单位），部分旧版 Safari 解析不稳定 - 如果祖先同时有
overflow: hidden和border-radius，仅替换overflow即可，border-radius仍生效 - 慎用
display: flow-root或clear等间接方式“模拟”overflow: hidden，它们不触发 sticky 限制，但也无法解决裁剪需求
为什么 -webkit-sticky 顺序写错就全失效？
iOS Safari 15.4 及更早版本只识别 position: -webkit-sticky，且 CSS 解析器遇到非法属性值会跳过整行声明。如果 position: sticky 写在前面，后面再跟 position: -webkit-sticky，旧版 Safari 可能直接忽略整个 position 声明。
- 正确顺序必须是：
position: -webkit-sticky;在前，position: sticky;在后 - 错误写法示例：
position: sticky; position: -webkit-sticky;—— 后者不合法，整行被丢弃 - 别写
-webkit-position: sticky，这个属性名不存在，浏览器直接忽略 - 若用 PostCSS，确认
autoprefixer配置目标包含ios_saf
flex/grid 父容器里 sticky 失效，光改 overflow 不够
当 sticky 元素的直接父级是 display: flex 或 display: grid，Safari 对“可滚动区域”的判断更苛刻：它需要明确的主轴滚动空间 + 稳定的基线参考，否则不触发粘性。
- 给 flex/grid 父容器加
align-items: flex-start（避免stretch或baseline干扰“进入视口”的判断） - 显式设
max-height+overflow-y: auto，让它成为真正可滚动的容器；仅写min-height: 100vh不够，Safari 可能仍不认 - 避免
inline-flex或inline-grid—— inline 级容器不产生 BFC，sticky 直接失效 - 慎用
transform、filter、will-change，它们会创建新层叠上下文，让 sticky 锚定错位
最常被忽略的是：干扰 overflow 往往藏在第三层甚至第四层祖先上，而不是直接父级；而 Safari 不报错，只会静默降级为 static。检查时得一路点到 body，不能停在第一层父元素。
