移动端 sticky 在局部滚动容器中失效，主因是祖先元素触发降级：overflow 隐藏类属性、inline-flex/grid、flex/grid 容器配置不当等会静默禁用 sticky，导致计算阶段即变为 static。
移动端 sticky 在局部滚动容器中失效，90% 不是 top 没写对，而是它压根没进入 sticky 流程——iOS Safari 和多数安卓 WebView 会直接把 position: sticky 降级为 static，连“尝试粘一下”都不会发生。
为什么 DevTools 显示 position: sticky 却不生效
浏览器在样式计算阶段就决定是否启用 sticky 行为。如果 sticky 元素的任意祖先（哪怕隔了三层）满足以下任一条件，它就会被静默禁用：
-
overflow: hidden、overflow: auto或overflow: scroll，且该祖先自身未形成实际滚动（例如内容没溢出、高度固定、min-height: 100vh随地址栏抖动导致不可靠） -
display: inline-flex或display: inline-grid—— 它们不创建块格式化上下文（BFC），sticky 规范直接忽略 - 父容器是
flex或grid，但没显式声明主轴方向（如flex-direction: column）、没设max-height、或用了align-items: center等干扰基线判定的属性
验证方法：选中 sticky 元素 → 「Computed」面板里看 position 值是不是 static；如果是，说明已被截断，不是渲染问题。
如何快速定位是哪一层祖先在“卡住” sticky
必须逐级向上检查，不能只盯直接父级。重点排查这些常见“藏雷”位置：
- UI 框架组件外层：
.ant-modal-body、.van-card、微信小程序的scroll-view、Swiper 的 wrapper - CSS-in-JS 注入的内联样式，或运行时动态添加的 class（比如
is-open触发的overflow: hidden） - 父级用了
height: 100vh—— iOS Safari 中视口高度会随地址栏显隐变化，导致容器高度不稳定，无法构成可靠滚动上下文
临时验证技巧：在 DevTools 中给某一层加 overflow: visible !important，如果 sticky 立刻恢复，问题就锁定了。
不删 overflow: hidden 怎么让 sticky 继续工作
很多场景下裁剪是刚需（圆角卡片、弹窗防穿出），硬删会破 UI。替代方案更稳妥：
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果完全一致，但不创建新 BFC，sticky 链保持完整（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：在带
overflow的容器外，套一个position: relative的 wrapper，再把 sticky 元素挂进去 - 若必须保留在局部滚动容器内，确保其直接父级设了
max-height+overflow-y: auto+flex-direction: column+align-items: flex-start
注意：别用 transform、filter 或 will-change，它们会在爷爷级就创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是视口。
iOS Safari 15.4 及更早版本需要 -webkit-sticky
旧版 iOS Safari 完全不识别 position: sticky，只认 position: -webkit-sticky，而且顺序不能错：
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 不能写成
-webkit-position: sticky（属性名不存在）或带单位的clip-path: inset(0px)（部分旧版解析失败） - PostCSS 用户请确认
autoprefixer目标包含ios_saf，否则不会自动插前缀
最易被忽略的是：当 sticky 元素处于 flex/grid 容器中时，“可滚动区域”的判定逻辑比桌面端更苛刻——它需要稳定的高度、明确的主轴、以及不被居中对齐干扰的基线参考，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
