position: sticky 无效最常见原因是未设置 top 等偏移值，或祖先元素存在 overflow: hidden/auto、transform、filter 等阻断定位上下文的属性，导致其退化为 static 或 relative。
为什么写了 position: sticky 却完全没反应
最常见原因是只加了 position: sticky，但漏掉了 top（或 bottom/left/right）阈值。浏览器直接回退为 position: relative，视觉和行为上都毫无粘性。
必须显式设置至少一个方向的偏移值，top: 0 是最稳妥的起点——它表示元素顶部到达其最近可滚动祖先的顶部时触发吸附。不能同时写 top 和 bottom，部分浏览器会整条声明忽略。
验证方式：打开 DevTools → Elements → Computed 面板，确认 position 的最终计算值是不是 sticky；如果不是，说明已被祖先干扰。
父容器 overflow: hidden 或 auto 导致失效
只要任意一层祖先（从 sticky 元素自身向上直到 body）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该祖先**没有设 position: relative 等定位属性**，sticky 就会退化为 static，Computed 面板里看到的 position 就是 static。
- 常见干扰源包括：
.ant-layout-sider、.container-fluid这类 UI 框架容器 - 弹窗内自定义滚动区（如
overflow: auto的.modal-body） - 甚至只是用了
overflow: clip（Chrome 119+ 支持，同样触发限制）
临时验证：给可疑父级加 overflow: visible !important，如果吸顶恢复，就坐实是它的问题。
Flex/Grid 容器 + align-items 导致“看着在顶部，实际没吸住”
当 sticky 元素的直接父级是 display: flex 或 display: grid，且设置了 align-items: center、justify-content: space-between 等对齐属性时，元素视觉位置会被拉偏，但 top 的计算基准仍按原始文档流位置——结果就是“明明 top: 0，却没吸到视口顶边”。
更隐蔽的是：这类容器若还带 overflow: hidden（哪怕只是为了清除浮动），sticky 会直接失效。这不是 bug，而是规范行为——flex/grid 容器本身不创建新的层叠上下文，但 overflow 属性会阻断 sticky 定位流的传播。
修复建议：
- 给 flex/grid 父容器套一层
div，内层加position: relative，sticky 元素挂在这层下面 - 把
overflow: hidden移到更外层，确保 sticky 元素的**直接父容器**既无overflow限制，也不带transform、filter等触发新层叠上下文的属性
移动端 iOS Safari 中 sticky-top 失效的特殊原因
iOS Safari 对 sticky 更敏感，常见失效点不是 CSS 写错，而是环境被悄悄破坏：
- 父容器加了
transform（哪怕只是transform: translateZ(0)）、filter或opacity: 0.99，都会创建新层叠上下文，让 sticky 直接退化为static - 导航栏外层用了
height: 100vh，iOS 上min-height计算异常，导致吸附作用域错误；应改用min-height: -webkit-fill-available或min-height: 100vh - 软键盘弹出/收起时 viewport 高度突变，可能重置
top值，造成短暂失效——这不是 bug，是渲染延迟，需配合resize事件做节流更新
真正难排查的，往往不是某一行 CSS 错了，而是某个祖先节点默默加了一行 overflow: hidden 或 transform，而你根本没意识到它会影响 sticky 的定位上下文连通性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
