移动端 sticky 失效主因是祖先元素 overflow:hidden/auto/scroll、inline-flex/grid 或 height:100vh 静默禁用滚动上下文，致 sticky 退化为 static；需逐级检查 computed overflow 与 display，用 clip-path:inset(0) 替代 overflow:hidden 或提升 sticky 元素层级。
移动端 sticky 失灵，不是“部分机型”问题，而是 iOS Safari（尤其 15.4 之前）和某些 Android WebView 对 position: sticky 的实现有硬性限制——它不看设备型号，只看 DOM 结构和 CSS 环境是否满足粘性定位的触发条件。只要不满足，哪怕写对了 top: 0，Computed 中的 position 也会直接变成 static，毫无提示。
为什么 DevTools 里写了 sticky 却显示 static
浏览器在样式计算阶段就决定是否启用 sticky 行为，不是渲染失败，而是“压根没进 sticky 流程”。常见原因包括：
- 任意祖先元素（哪怕隔了 4 层）设置了
overflow: hidden、overflow: auto或overflow: scroll，且该祖先未形成实际滚动（比如内容没溢出、高度固定） - 父容器是
display: inline-flex或display: inline-grid—— 它们不创建 BFC，sticky 被规范直接忽略 - 某个祖先用了
transform（如translateZ(0)）、filter或will-change，创建了新层叠上下文，导致 sticky 参考系错位 -
body或最外层容器设了height: 100vh：iOS 上min-height计算异常，滚动上下文无法建立
iOS Safari 中 flex/grid 容器里 sticky 不动
flex 或 grid 容器本身不自动产生滚动上下文，Safari 对“可滚动区域”的判定更苛刻。缺一不可：
- 给 flex 父容器加
flex-direction: column+overflow-y: auto（不是overflow: auto） - 显式设
max-height（如max-height: 500px），不能只靠min-height: 100vh - 加
align-items: flex-start——align-items: stretch或baseline会干扰“进入视口”的判定 - 绝对别用
display: inline-flex或inline-grid，它们会让 sticky 直接失效
表格表头 <thead> 加 sticky-top 完全没反应
<thead> 默认是 display: table-header-group，CSS 规范明确不支持 sticky。浏览器看到就跳过，不会报错，Computed 中 position 一定是 static。
立即学习“前端免费学习笔记（深入）”；
- 必须把
position: sticky落到每个<th>或<td>上，并配top: 0和z-index: 1070 -
<th>必须有background-color，否则滚动时文字透出 - 外层容器（如
<div class="table-wrapper">）要设max-height: 400px+overflow-y: auto，仅靠table-responsive不够 - 避免
<table>上设border-collapse: separate，Safari/Chrome 中表头会“粘住但往下掉像素”
为什么滚动到底部 sticky 突然消失
这不是 bug，是边界行为：position: sticky 只在“滚动范围内”生效。当 sticky 元素随父容器滚出可滚动区域末端时，它自动解除固定，回归文档流。
- iOS 上尤其明显：若父容器内容太短、或高度计算异常（如
100vh遇到地址栏缩放），sticky 区域可能被压缩甚至归零 - 不要依赖
top: 0就能全程吸顶；它的有效范围由父容器的height/max-height和内容总高度共同决定 - 若必须全程固定（如导航栏），别硬套 sticky —— 改用
position: fixed+ 手动占位更可控
真正容易被忽略的点：sticky 不是“写上就生效”的属性，而是一套依赖完整滚动上下文链的机制。任何一个环节断开（overflow、transform、display 类型、高度缺失），它就静默退出。排查时别只盯目标元素，要从它开始往上翻父节点的 Computed 样式，逐层确认 overflow 和 display 值。
