position: sticky被静默降级为static，主因是祖先元素overflow:hidden/auto/scroll截断滚动上下文；应逐级检查overflow值，用clip-path:inset(0)替代overflow:hidden修复。
不是不支持，而是被静默降级为 position: static —— 90% 的问题出在某个祖先元素悄悄切断了滚动上下文。
DevTools 里看到 position: sticky 却 computed 是 static
这说明浏览器压根没启动 sticky 逻辑，不是渲染失败，是解析阶段就被跳过了。常见诱因包括：
- 任意祖先（哪怕隔了 4 层）的
overflow计算值是hidden、auto或scroll，且该容器实际不可滚动（比如高度固定、内容很短） - 父容器是
display: inline-flex或display: inline-grid—— 它们不创建 BFC，sticky 被规范直接忽略 - iOS Safari 15.4 及更早版本只认
position: -webkit-sticky，且必须写在position: sticky前面；顺序反了整行 CSS 被丢弃
iOS Safari 中 sticky 滚着滚着就消失
这不是 bug，是边界行为暴露了底层约束。Safari 对“可滚动容器”的判定比桌面端更苛刻，尤其当父容器是 flex/grid 时：
-
height: 100vh而非min-height: 100vh：容器高度被截断，内容撑高后 sticky 失去作用域 - flex 父容器只写了
overflow: auto：必须显式写flex-direction: column+overflow-y: auto - 用了
align-items: center或stretch：干扰“进入视口”的判定逻辑，导致吸附闪一下就退回去 - 父级是
inline-flex或inline-grid：inline 级容器不创建 BFC，sticky 直接无效 - 加了
transform: translateZ(0)：创建新层叠上下文，sticky 参考系变成变换后的容器，而非视口
祖先有 overflow: hidden 但不能删，怎么办？
硬删会破 UI（比如圆角图片裁剪、弹窗边界约束），此时最稳妥的替代方案是用 clip-path: inset(0)：
- 视觉效果完全一致，但不创建新 BFC，也不截断滚动上下文
- 现代浏览器全覆盖（Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+），2026 年已无需兼容 IE
- 写法简单：
overflow: hidden→clip-path: inset(0) - 注意别和
border-radius同时用在一个元素上，可能引发渲染异常；可提一层wrapper分离
微信小程序或 Ant Design 里 sticky 失效
这些框架常在模态框、卡片、轮播壳等组件内部动态注入带 overflow: hidden 的 wrapper，你很难一眼发现：
- 微信小程序的
scroll-view默认加overflow: hidden - Ant Design 的
.ant-modal-body、.ant-card-body常含overflow: hidden - Swiper 容器、TabPane、CSS-in-JS 库（如 Emotion）注入的内联样式也容易漏查
- 临时验证方法：选中 sticky 元素，在 DevTools 里逐级点 parent，盯住每层的
overflow-x和overflow-y计算值；加overflow: visible !important后 sticky 恢复，就锁定了问题层
真正麻烦的不是写错 top，而是滚动上下文被某处 overflow: hidden 或 inline-flex 静默劫持——它不报错、不警告，只默默把 position 设成 static。查的时候得往上翻到 body，一个都不能漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
