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: relative wrapper，把 sticky 元素挂在这层下面

父容器是 flex/grid 且没处理对齐行为

当 sticky 元素的**直接父容器**是 display: flex 或 display: grid，且该容器设置了 align-items: center、justify-content: space-between 等，sticky 的“吸附基准线”仍按原始文档流计算，但视觉位置已偏移，造成“粘不住”的错觉。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 典型表现：表头看起来居中了，但滚动时 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，排查时容易卡在错误的方向上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！