computed position 为 static 表明 sticky 被浏览器降级，常见原因包括祖先元素 overflow 非 visible、旧版 safari 缺失 -webkit-sticky 前缀、sticky 元素未设 top/bottom、父级使用 transform 等。

先看 computed position 是不是 static

如果 DevTools 的「Computed」面板里 position 显示为 static，说明 sticky 已被浏览器主动降级——不是没写对，是规则被丢弃或条件不满足。此时「Styles」里看到的 position: sticky 只是源码残留，实际无效。

常见诱因：

• 祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll（哪怕只是爷爷级）
• iOS Safari ≤15.4 没写 position: -webkit-sticky，或顺序写反了
• sticky 元素自身没设 top / bottom 值（top: auto 也等同于没设）
• 直接父级用了 transform、filter、will-change 或 opacity

逐层检查祖先 overflow 计算值

失效几乎总藏在某层看不见的 wrapper 里。用 DevTools 从 sticky 元素开始，逐级点开 parentElement 链接，直到 body，每层都看「Computed」里的 overflow-x 和 overflow-y。

重点盯这些位置：

• Modal / Drawer / Card 组件外层（Ant Design 的 .ant-modal-body、Vant 的 .van-card）
• 微信小程序的 scroll-view 默认带 overflow: auto
• CSS-in-JS 动态注入的内联样式（比如 emotion 的 css 函数生成的 wrapper）
• Flex/Grid 容器本身没设高度，但其父级却加了 overflow: hidden

临时删掉可疑节点的 overflow 声明，如果 sticky 立刻恢复，就确认是它。

旧版 Safari 必须写 -webkit-sticky 且顺序不能错

iOS Safari 15.4 及更早版本完全不识别 position: sticky，只认 position: -webkit-sticky，而且解析器遇到非法值会整行跳过。

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

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

下载

必须这样写：

position: -webkit-sticky;
position: sticky;

不能这样写：

• position: sticky; 在前，position: -webkit-sticky; 在后
• -webkit-position: sticky（属性名不存在）
• 只写标准声明，指望 autoprefixer 自动补（需确认配置含 ios_saf ）

验证是否生效：在旧版 Safari DevTools 里看 computed position 是否为 -webkit-sticky 或 sticky，不是 static。

不能删 overflow 时的替代方案

很多场景下 overflow: hidden 是业务必需（如圆角裁剪、弹窗内容约束），硬删会破坏 UI。这时别碰 overflow，改用不影响粘性锚定链的等效手段：

• 用 clip-path: inset(0) 替代 overflow: hidden —— 视觉效果一致，但不创建新 BFC，sticky 不受影响
• 若父容器必须是 overflow: auto（比如横向滚动表格），给 sticky 元素包一层 position: relative 的 wrapper：

  <div style="overflow: auto">
    <div style="position: relative">
      <div class="sticky"></div>
    </div>
  </div>

• 避免用 overflow: clip 做兜底——Firefox 97 以下、Safari 15.4 以下不支持，兼容性不如 clip-path

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

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