safari 中 position: sticky 失效主因是祖先元素 overflow 静默禁用：overflow: hidden/auto/scroll 且容器不滚动时，safari 将其视为硬边界使 sticky 降级为 static；需逐级检查 computed overflow 值，可用 clip-path: inset(0) 替代 overflow: hidden，同时确保 -webkit-sticky 在 sticky 前声明，并修复 flex/grid 父容器的 align-items 和 overflow 设置。
检查祖先元素的 overflow 是否静默禁用 sticky
Safari 里 position: sticky 失效，八成不是你没写 top，而是某个祖先节点（哪怕隔了三层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器本身不滚动——Safari 就会直接把它当“硬边界”，把 sticky 元素降级为 position: static。
常见藏雷位置包括：.ant-modal-body、.van-card、微信小程序的 scroll-view、Swiper 外层 wrapper，它们常由框架自动注入 overflow: hidden，你根本没在自己的 CSS 里写。
快速验证方法：
- 在 Safari DevTools 中选中 sticky 元素，打开「Computed」面板，看
position值是不是static - 逐级点开
parentElement，挨个查每层的overflow-x和overflow-y计算值 - 临时给某层加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
用 clip-path: inset(0) 替代 overflow: hidden
不能删 overflow: hidden？别硬改 DOM 结构。用 clip-path: inset(0) 替代，视觉裁剪效果完全一致（圆角、防穿出都保留），但它不创建新块格式化上下文（BFC），也不干扰 sticky 的包含块计算。
注意两点：
- 必须写成
clip-path: inset(0)，不要带单位（如inset(0px)），部分旧版 Safari 解析不稳定 -
clip-path: inset(0)在 Safari 13.4+、iOS Safari 13.4+ 已全面支持，2026 年无需兼容顾虑
确保 -webkit-sticky 声明顺序正确
iOS Safari 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky，而且顺序写错会导致整条规则被跳过——不是“不生效”，是浏览器压根没解析成功。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
正确写法必须是：
.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
错误写法包括：
-
position: sticky; position: -webkit-sticky;（后写的属性名非法，整行被忽略） -
-webkit-position: sticky（属性名不存在） - 用 PostCSS 却没配
ios_saf 目标，autoprefixer 不会插前缀
修复 flex/grid 父容器导致的判定失准
当 sticky 元素直接挂在 display: flex 或 display: grid 容器下，Safari 对“可滚动区域”的判定更苛刻：它需要明确主轴方向 + 实际滚动空间 + 稳定基线参考。
必须同时满足：
- 给父容器加
align-items: flex-start（避免stretch或baseline干扰“进入视口”判断） - 显式设
max-height+overflow-y: auto，不能只靠min-height: 100vh（iOS Safari 中vh会随地址栏显隐抖动，导致 sticky 频繁重置） - 绝对不要用
display: inline-flex或inline-grid——它们不产生块级格式化上下文，sticky 直接失效
真正难的不是写对 top: 0，而是找到那个默默加了 overflow: hidden 却没人记得的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
