ios safari 15.4及更早版本仅识别position: -webkit-sticky且必须置于position: sticky之前，否则整行被丢弃；需配合autoprefixer配置ios_saf

iOS Safari 15.4 及更早版本根本不认 position: sticky，只认 position: -webkit-sticky，而且顺序写错整条规则就失效——不是“不生效”，是直接被跳过。

必须把 -webkit-sticky 写在 sticky 前面

旧版 Safari 的 CSS 解析器遇到非法值会丢弃整行。如果先写 position: sticky，再写 position: -webkit-sticky，它可能连前一条都忽略。

• ✅ 正确写法：position: -webkit-sticky; 必须在前，position: sticky; 在后
• ❌ 错误写法：position: sticky; 在前，或 -webkit-position: sticky（属性名不存在）
• ⚠️ PostCSS autoprefixer 要配 ios_saf ，否则不会插前缀

DevTools 里 position 显示为 static 就是前缀没起作用

这不是渲染延迟或样式覆盖，而是浏览器压根没解析成功。检查 computed 样式时，如果 position 是 static，说明 -webkit-sticky 没生效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 逐级点开父元素，在「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 元素往上点 parent，查每一层的 computed overflow-x 和 overflow-y
• 不能删 overflow？改用 clip-path: inset(0) 替代，视觉效果一致，但不干扰粘性定位

真正难的不是补前缀，而是找到那个没写在你代码里、却悄悄加了 overflow: hidden 的爷爷级 wrapper——它可能藏在组件库源码里，也可能来自某行被遗忘的 CSS-in-JS 注入。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！