旧版ios safari（15.4及更早）仅识别position: -webkit-sticky且必须置于position: sticky之前，否则整行被丢弃；任意祖先的overflow: hidden/auto/scroll会静默降级为static，flex/grid父容器未设高度或含align-items: center也会导致基准错位。
旧版 iOS Safari（15.4 及更早）不认 position: sticky，只认 position: -webkit-sticky，而且必须写在标准声明之前；更关键的是，任意祖先元素的 overflow: hidden、auto 或 scroll 会静默让 sticky 元素退化为 static——不是“没生效”，是浏览器压根没启动粘性逻辑。
为什么 DevTools 里 position 显示为 static？
这不是样式被覆盖，而是解析失败或被拦截：
-
position: -webkit-sticky没写，或写在position: sticky后面 → 整行被 Safari 丢弃 - 写了
-webkit-position: sticky（属性名错误）→ 解析失败，回退到默认值 - 祖先某层有
overflow: hidden且不滚动 → Safari 直接将 sticky 元素降级为static，Computed 面板里就是static - 父容器是
display: flex或grid，又带align-items: center→ top 基准错位，视觉上“卡在半空”
怎么写才真正生效？
必须按顺序、显式、无歧义地声明：
- 先写
position: -webkit-sticky;，再写position: sticky;—— 顺序反了就全失效 - 必须配至少一个偏移值：
top: 0（最常用），不能只写position: sticky - 避免同时设
top和bottom，部分旧版 Safari 会整条忽略 - PostCSS 用户：确认
autoprefixer配置含ios_saf ，否则前缀不会插入
祖先 overflow 怎么排查和绕过？
别猜，用 Safari DevTools 逐层点开父节点，在「Computed」里查 overflow-x 和 overflow-y：
- 找到值为
hidden、auto或scroll的祖先 → 它就是罪魁祸首 - 临时删掉它的
overflow声明，看 sticky 是否立刻恢复 - 不能删？用
clip-path: inset(0)替代 —— 视觉效果一致（包括圆角保留），但不创建新 BFC，也不干扰 sticky 定位流 - 别写
clip-path: inset(0px)，带单位在旧版 Safari 里解析不稳定
哪些场景最容易踩坑？
这些地方常悄悄加了 overflow，你根本没写，但框架或组件库已经注入了：
- Ant Design 的
.ant-modal-body、.ant-table-body - Vant 的
.van-card、.van-list - 微信小程序的
scroll-view（默认overflow: auto） - Swiper 外层 wrapper、Tab 根节点、CSS-in-JS 注入的隐藏滚动条样式
- Flex/Grid 父容器加了
overflow: hidden（哪怕只为清除浮动）
真正难的不是补前缀，是找到那个藏在第三方组件源码里、没出现在你编辑器中的 overflow: hidden —— 它可能隔了三层 DOM，却足以让整个 sticky 逻辑静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
