sticky 元素 computed position 变为 static 是因祖先元素切断滚动上下文导致的静默降级，常见于 overflow: hidden 的模态框、scroll-view、swiper 容器或 css-in-js 注入样式；ios safari 中还受 flex/grid 布局、height: 100vh、transform 等影响，需通过提升层级、clip-path 替代或调整 viewport 适配。
sticky 元素 computed position 变成 static 了
这不是浏览器不支持，而是 sticky 被静默降级了。DevTools 里看到 position: sticky 声明还在，但 Computed 栏显示 position: static，说明它已失效。根本原因几乎总是某个祖先元素切断了滚动上下文。
重点检查这些位置：
- 模态框外层（如
.ant-modal-body、.modal-content）常带overflow: hidden - 微信小程序的
scroll-view默认加overflow: hidden - Swiper 容器、TabPane、Card 内部 wrapper，都可能动态注入
overflow: auto - CSS-in-JS 库（如 Emotion、Styled Components）在运行时插入的内联样式，容易漏查
临时验证方法：选中 sticky 元素，逐级往上点 parent，在 Computed 面板盯住 overflow 值，一旦看到 hidden、auto 或 scroll，就把它临时改成 visible !important —— 如果 sticky 立刻恢复，问题就锁定了。
iOS Safari 里 sticky-top 滚着滚着就消失了
这通常不是 bug，是边界行为暴露了底层约束。iOS 对“可滚动容器”的判定比桌面端更苛刻，尤其当父容器是 flex/grid 时。
常见触发条件：
-
height: 100vh而非min-height: 100vh：容器高度被截断，内容撑高后 sticky 失去作用域 - flex 父容器没设
flex-direction: column+overflow-y: auto：仅写overflow: auto不够，Safari 不认 - flex 容器用了
align-items: center或stretch：干扰“进入视口”的判定逻辑，导致吸附闪一下就退回去 - 父级是
inline-flex或inline-grid：inline 级容器不创建 BFC，sticky 直接无效
别用 transform: translateZ(0) 强制硬件加速——它会创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是你想要的视口。
必须保留 overflow: hidden 时怎么救 sticky
业务上不能删 overflow: hidden（比如圆角裁剪、防动画穿帮），那就得绕开它，而不是硬改。
两个实操性强的替代方案：
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新 BFC，sticky 链完整保留 - 把 sticky 元素提一层：在带
overflow: auto的容器外再套一个position: relative的 wrapper，把 sticky 元素挂进去，让它锚定到更高层的、真正可滚动的上下文
注意：慎用 will-change、filter、transform，它们都会悄悄改变 sticky 的参考系，且 iOS 上影响更明显。
软键盘弹出后 sticky 顶部偏移或失效
iOS Safari 在软键盘弹出/收起时会重排 viewport，导致 top: 0 计算失准或渲染延迟，不是代码问题，是平台特性。
缓解方式有限但有效：
- 避免把 sticky 元素放在
height: 100vh的容器里；改用min-height: -webkit-fill-available - 如果页面有输入框，给 sticky 元素加
contain: layout paint，减少重绘范围 - 不要监听
window.scroll，而是监听实际滚动容器的scroll事件，并用event.target.scrollTop取值（requestAnimationFrame里读scrollTop可能不是最新值）
最麻烦的点往往不在 sticky 本身，而在它上面三层的某个 overflow 或 transform —— 它们不报错、不警告，只默默让 sticky 变成 static。排查时得一层层往上点，而不是只盯着自己写的那行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
