先说一个很多前端开发者在实际项目中踩过的坑：iOS Safari 15.4 及更早版本，压根不认识 position: sticky，它只认 position: -webkit-sticky。而且，这个前缀的顺序一旦写错，整条规则就会被直接跳过——不是“不生效”，是浏览器根本没解析。
必须把 -webkit-sticky 写在 sticky 前面
旧版 Safari 的 CSS 解析器有个特性：遇到非法值会直接丢弃整行声明。如果先写 position: sticky，再写 position: -webkit-sticky，它可能连前一条都一起忽略掉。这意味着，正确的写法必须让 -webkit-sticky 在前，sticky 在后。
- ✅ 正确写法：
position: -webkit-sticky;在前，position: sticky;在后 - ❌ 错误写法：
position: sticky;在前，或使用-webkit-position: sticky（后者属性名根本不存在） - ⚠️ 如果你用 PostCSS autoprefixer，记得配置
ios_saf <= 15.4，否则不会自动插入这个前缀
DevTools 里 position 显示为 static 就是前缀没起作用
这不是渲染延迟，也不是样式覆盖，而是浏览器压根没解析成功。检查 computed 样式时，如果 position 值是 static，说明 -webkit-sticky 根本没生效。
- 逐级点开父元素，在「Computed」面板里查看每一层的
position值，看是否始终为static - 临时删掉其他样式（比如
transform、filter），这些属性会创建新的层叠上下文，让-webkit-sticky的参考系错乱 - 别用
@supports (position: sticky)来做检测——它在旧版 Safari 里返回false，但你仍然需要提供-webkit-版本才行
仅靠前缀还不够：祖先的 overflow 会静默关掉 -webkit-sticky
-webkit-sticky 和 sticky 一样，会被任意祖先元素的 overflow: hidden、auto 或 scroll 静默禁用——哪怕那个容器实际上根本没有滚动内容。
- 微信小程序的
scroll-view、Ant Design 的.ant-modal-body、Vant 的.van-card都默认加了overflow: hidden - 用 DevTools 从 sticky 元素往上，逐层检查父级的 computed
overflow-x和overflow-y - 如果不能删除
overflow，可以考虑改用clip-path: inset(0)来替代，视觉效果一致，但不干扰粘性定位
真正难的不是补前缀，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。值得警惕的是，这种静默失效在排查时往往最容易被忽略，而它恰恰是导致一切看起来“没问题”但实际不工作的根本原因。
