移动端sticky失效主因是祖先元素overflow:hidden/auto/scroll静默截断滚动上下文，致sticky退化为static；需逐级检查computed中overflow-x/y值，用clip-path:inset(0)替代overflow:hidden或提升sticky元素层级。
移动端 sticky 失效，几乎从不因为 top 没写对，而是被父容器“静默拦截”——iOS Safari 和多数安卓 WebView 会直接把 position: sticky 当作 static 处理，连尝试吸附都不会发生。
为什么 DevTools 显示 position: sticky 却始终不生效
浏览器在样式计算阶段就决定是否启用 sticky 行为，不是渲染失败，是压根没进 sticky 流程。最典型的现象是：Computed 面板里 position 值始终显示为 static，哪怕你写了 top: 0 也毫无反应。
- 检查路径上任意祖先（哪怕隔了 4 层）的
overflow-x和overflow-y计算值，只要出现hidden、auto或scroll，且该容器当前不可滚动（比如高度固定、内容未溢出），sticky 就会被强制关掉 - 特别注意 UI 框架封装层：微信小程序的
scroll-view、Ant Design 的.ant-modal-body、Swiper 的外层 wrapper，常悄悄加了overflow: hidden - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
flex 或 grid 父容器里 sticky 不工作怎么办
Flex/Grid 容器本身不自动创建可滚动上下文，Safari 对“可滚动区域”的判定更苛刻：必须同时满足主轴方向明确 + 可滚动空间存在 + 基线稳定，缺一不可。
- 给
flex父容器加flex-direction: column+overflow-y: auto（不能只写overflow: auto） - 显式设
max-height或height，例如max-height: 500px；仅靠min-height: 100vh不够，iOS Safari 中vh会随地址栏显隐抖动 - 加
align-items: flex-start，避免stretch或baseline干扰“进入视口”的判定 - 绝对别用
display: inline-flex或inline-grid——它们不创建 BFC，sticky 直接被规范忽略
必须保留 overflow: hidden 时怎么绕过限制
很多场景下裁剪是刚需（圆角卡片、弹窗防穿出、动画边界控制），硬删 overflow: hidden 会破 UI。这时不该改 overflow，而该换锚点或换裁剪方式。
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果完全一致，但不创建新 BFC，sticky 行为 100% 保留（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：比如从
.card内部提到外层明确设了overflow-y: auto的容器下，或挂到body下（注意z-index和布局影响） - 慎用
transform、filter、will-change：它们会在爷爷级就创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是视口
真正棘手的不是怎么写 sticky，而是它在哪一层被截断——那个“看不见的 overflow: hidden”可能藏在第三方组件的 shadow DOM 里，也可能由 CSS-in-JS 动态注入。排查时别只盯直接父级，得一路点到 body，逐层看 computed overflow 和 display。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
