sticky 失效主因是父级“静默禁用”：祖先 overflow 非 visible、flex/grid 父容器未设 align-self/justify-self、父容器高度限制导致滚动上下文丢失，以及 iOS Safari 渲染缺陷。
绝大多数情况不是代码写错了，而是 sticky 被父级元素“静默禁用”了——浏览器直接把它当成了 position: static，连 warning 都不报。
祖先元素 overflow 不是 visible 就会失效
只要从 sticky 元素自身向上查到 body 的任意一层，overflow 计算值是 hidden、auto 或 scroll，sticky 就立即退化为 static。这不是兼容性问题，是规范强制行为。
- 常见来源：CSS 框架容器（如
.ant-layout-content）、弹窗内滚动区、自定义.table-wrap、甚至某些重置样式里悄悄加的overflow: hidden - 验证最快方式：在开发者工具中逐层点击父节点，看
Computed面板里的overflow值是否为visible - 临时修复：删掉可疑父级的
overflow声明；若必须保留（比如要隐藏溢出），加一层position: relativewrapper，把 sticky 元素挂在这层下面
父容器是 flex/grid 且没处理对齐行为
当 sticky 元素的**直接父容器**是 display: flex 或 display: grid，且该容器设置了 align-items: center、justify-content: space-between 等，sticky 的“吸附基准线”仍按原始文档流计算，但视觉位置已偏移，造成“粘不住”的错觉。
- 典型表现：表头看起来居中了，但滚动时 top: 0 完全不生效
- 必须显式设置
align-self: flex-start（Flex）或justify-self: start（Grid） - 别指望靠
margin-top补偿——它改的是布局位置，不影响 sticky 的触发逻辑
父容器高度受限导致滚动上下文丢失
如果 sticky 元素所在的父容器设了 height: 100vh 或固定高度，且内容未溢出，浏览器判定“无需滚动”，就不会建立有效的滚动上下文，sticky 直接不触发。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.page { height: 100vh; }→ 即使子内容超长，.page 自身也不滚动 - 正确写法：
.page { min-height: 100vh; }，并确保其内容总高度 > 视口高度 - 额外注意：Safari 对
height: 100%在 flex 容器中的解析极不稳定，优先用min-height
iOS Safari 下的隐藏陷阱
iOS Safari（尤其 15.4 之前）对 sticky 的实现有渲染管线缺陷：软键盘弹出、地址栏收放会导致视口重算，top: 0 瞬间错位；flex/grid 容器若没显式设 align-items: start，可能完全静默失效。
- 兜底建议：给 sticky 元素加
backface-visibility: hidden强制硬件加速 - 安全写法：
top: env(safe-area-inset-top)替代硬写top: 0 - 真机必测：模拟器无法复现 iOS 合成层调度问题
真正麻烦的从来不是“怎么写 sticky”，而是“为什么它被悄悄关掉了”——它不报错、不警告，只默默退回 static，排查时容易卡在错误的方向上。
