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 < 1
逐层检查祖先 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，而且解析器遇到非法值会整行跳过。
必须这样写：
position: -webkit-sticky; position: sticky;
不能这样写：
-
position: sticky;在前，position: -webkit-sticky;在后 -
-webkit-position: sticky（属性名不存在） - 只写标准声明，指望 autoprefixer 自动补（需确认配置含
ios_saf <= 15.4）
验证是否生效：在旧版 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 注入。
