computed position为static是sticky被静默降级的结果，主因是任意祖先overflow-x/y为hidden/auto/scroll且自身不可滚动，或父容器为inline-flex/grid、height:100vh、safari缺少-webkit-sticky前缀等。
position: sticky 不生效，90% 是因为 computed position 为 static —— 它不是“没写对”，而是被浏览器静默降级了，必须从祖先滚动上下文入手排查。
为什么 computed position 是 static？
sticky 元素一旦任意祖先（哪怕隔了 3 层）的 overflow-x 或 overflow-y 计算值是 hidden、auto 或 scroll，且该祖先自身不可滚动（比如高度刚好、内容未溢出），规范就强制将其降级为 static。
你写的 position: sticky 仍显示在 Styles 面板里，但 Computed 面板里已经是 static——这不是渲染延迟，是解析阶段就决定的。
- 重点排查：
.ant-modal外层 wrapper、.van-card、Tab 切换容器、Swiper 根节点、CSS-in-JS 动态注入的内联样式 - 别只查直接父级，得一路点到
html或body - 临时验证：在 DevTools 中给某层祖先加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
Flex/Grid 父容器下 sticky 找不到锚点
Flex 或 Grid 容器默认不自动产生滚动上下文。当 sticky 元素直接挂在 display: flex 或 display: grid 子级下，若父容器没设高度约束、或用了 align-items: center 等对齐方式，sticky 的“进入视口”判断就会失准——它压根找不到可参考的滚动边界。
- 给 flex/grid 父容器加
min-height: 1px或显式height/max-height，强制生成包含块 - 避免
display: inline-flex和display: inline-grid——它们不产生 BFC，sticky 直接被忽略 - 慎用
align-items: stretch或baseline，优先用flex-start，防止顶部基准线偏移导致top: 0失效 - 把
height: 100vh改成min-height: 100vh，允许内容自然撑高
iOS 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（属性名不存在） -
top/bottom等偏移值必须显式声明，不能依赖继承或默认值
替代方案：不用删 overflow: hidden 怎么保 sticky？
业务上常需要 overflow: hidden 来裁剪圆角图片、防止弹窗内容穿出、配合动画效果，不能硬删。绕过规范限制比硬改 DOM 更稳妥：
- 用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果一致，但不创建新 BFC，sticky 链保持完整（Chrome 93+、Firefox 97+、Safari 15.4+、Edge 79+ 已全覆盖） - 若需兼容 IE，只能重构 DOM 或改用 JS 模拟
- 或者加一层
position: relativewrapper：<div style="overflow: hidden"><div style="position: relative"><div class="sticky"></div></div></div>
最隐蔽的失效点往往不在 sticky 元素本身，而在某个被忽略的祖先的 overflow 或 transform；而 Safari 下的 -webkit-sticky 顺序问题，至今仍在真实设备上高频触发。动手前先看 computed position，比反复调 top 值有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
