position: sticky导航栏纹丝不动，最常见原因是未设top等偏移值、父容器overflow非visible、高度未定义或存在transform等触发层叠上下文的属性。

position: sticky 能实现导航栏吸顶，但不设 top、父容器有 overflow: hidden 或高度未定义，它就完全不工作——不是“偶尔失效”，是压根没触发。

为什么导航栏加了 position: sticky 却纹丝不动？

最常见原因不是浏览器不支持，而是粘性行为被直接拦在起跑线：

• 没写 top（或 bottom/left/right）——position: sticky 必须配合至少一个偏移值，否则等同于 position: relative
• 父容器没有明确高度：比如 main 或 body 没设 min-height: 100vh，浏览器无法判断“粘住”的上下边界
• 父级设置了 overflow: hidden、overflow: auto 或 overflow: scroll——iOS Safari 和部分 Chrome 版本会直接禁用 sticky 行为
• 导航栏自己用了 transform（哪怕只是 transform: translateZ(0)），或祖先元素有 transform / opacity / will-change，会创建新层叠上下文并中断 sticky

如何让 sticky 导航栏精准停在主导航下方？

次级导航栏不能贴顶，得卡在主 header 下方——这靠的是 top 值的精确控制，不是靠 JS 计算滚动距离：

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

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

下载

• 先确认主导航栏高度，比如固定高 64px，那次级导航的 top 就设为 64px，不是 0
• 避免用百分比单位：top: 10% 不合法，sticky 只接受 px、rem、em 等可解析为绝对偏移的值
• 如果主导航用了 position: fixed，次级导航的 top 是相对于视口计算的；如果主导航是文档流内元素，则需考虑其实际占位高度
• 用 padding-top 替代 margin-top 来预留空间——margin 会影响 sticky 的起始触发点

移动端 Safari 的 sticky 兼容性怎么兜底？

iOS 15.4 之前，Safari 对 sticky 的支持极不稳定；即使现在，在局部滚动容器（如 overflow: auto 的 div）里也大概率失效：

• 检测支持性：CSS.supports('position', 'sticky')，返回 false 时走降级逻辑
• 别在 position: relative + overflow: auto 的局部容器里硬上 sticky——iOS Safari 几乎必挂
• 必须局部滚动？改用 position: fixed + JS 监听 scroll，动态切换 is-sticky 类，并手动更新 top 值（虽然重，但稳）
• 不要加 will-change: transform “优化”——反而会让 Safari 更懵，直接放弃 sticky 计算

z-index 和层叠上下文怎么不出错？

sticky 元素仍在文档流中，但它能“浮”起来，前提是没被意外盖住：

• z-index 只在同层叠上下文中生效；如果父容器有 transform 或 opacity: 0.99，会隐式创建新层叠上下文，导致 sticky 导航被父级“框死”在底层
• 主导航栏通常设 z-index: 1000，次级导航建议设 z-index: 990，既高于内容又低于主导航
• sticky 不是脱离文档流，所以它下面的内容不会上顶——这是和 position: fixed 的本质区别，也是调试时容易忽略的定位参照点

真正难的不是写那行 position: sticky，而是搞清它在哪一级容器里生效、被谁截断、又被哪个层叠上下文压住。这些细节不逐个验证，光看效果“没动”，根本没法定位是 CSS 写错了，还是浏览器悄悄绕过了你。

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