computed中position为static说明sticky被静默降级；主因是任意祖先overflow-x/y为hidden/auto/scroll且不可滚动，或父容器为inline-flex/grid、未设高度、含transform/filter等，需用devtools逐级查computed值并以clip-path:inset(0)替代overflow:hidden。
直接看 DevTools 的 Computed 面板里 position 是不是 sticky —— 如果显示的是 static，说明它压根没进入 sticky 流程，90% 以上是祖先元素在“暗中拦截”。
Computed 中 position 是 static，怎么快速定位源头？
这不是 bug，是规范强制降级：只要任意祖先（从 sticky 元素往上直到 body）的 overflow-x 或 overflow-y 计算值为 hidden、auto 或 scroll，sticky 就会被静默置为 static。
- 别只看 Styles 面板里有没有写
overflow: hidden，要进 Computed 面板查「最终计算值」 - 重点排查：
.ant-modal外层 wrapper、.swiper-wrapper、Tab 切换容器、CSS-in-JS 注入的内联样式（比如 Emotion 动态加的style属性） - 临时验证：选中可疑祖先，在 Styles 面板里手动加
overflow: visible !important，如果 sticky 立刻恢复，问题就锁定了 - 用 Layout 面板确认该祖先的「Actual height」是否真大于设定高度（例如
height: 100vh但内容撑高了，却因overflow截断滚动）
必须保留 overflow: hidden 怎么办？
硬删常会破 UI：圆角图片裁剪失效、弹窗内容溢出、动画穿帮。此时 clip-path: inset(0) 是目前最轻量、兼容性最好的替代方案。
- 视觉效果和
overflow: hidden完全一致，但不创建新 BFC，也不截断滚动上下文 - 写法必须是
clip-path: inset(0)（不带单位），旧版 Safari 对inset(0px)解析不稳定 - 支持 Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+，2026 年已无需考虑 IE
- 若该元素同时有
border-radius，可直接替换overflow，border-radius仍生效；但避免两者写在同一层导致渲染异常，必要时提一层 wrapper
父容器是 flex/grid 或 inline 元素，sticky 直接被忽略
sticky 要求锚定在块格式化上下文（BFC）内，而某些 display 值天然不产生 BFC，浏览器连解析都不会进入 sticky 流程。
-
display: inline-flex或display: inline-grid的父容器：sticky 元素的position计算结果永远是static - 临时改成
display: flex或display: grid就能立刻验证 - sticky 元素本身是
span、a等默认inline的标签：必须显式设display: block、display: inline-block或display: table - flex 容器没设
height、min-height或max-height，sticky 无法判断“何时进入视口”，行为失准
iOS Safari 下 top: 0 看着没吸住，其实不是 CSS 写错
iOS Safari 对 sticky 更敏感，常见失效点不是漏写 top，而是环境被悄悄破坏：
- 父容器加了
transform（哪怕只是transform: translateZ(0)）、filter或opacity，都会阻断 sticky 定位流 - iOS Safari 15.4 及更早版本完全不识别
position: sticky，只认position: -webkit-sticky，且必须写在position: sticky前面 - 表格中的
th要单独设sticky，并确保表格容器有明确高度和overflow-y: auto - 如果用了
height: 100vh限制父容器，换成min-height: 100vh，否则容器无法随内容撑高，滚动上下文被锁死
真正难的不是写对那行 position: sticky，而是理解它依赖的整个定位链——任何一个环节的 overflow、display、transform 或 height 声明，都可能让它无声无息地退化成 static。排查时优先盯死 Computed 面板里的 position 和 overflow-x/y，比反复改 top 值有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
