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 计算滚动距离：
- 先确认主导航栏高度，比如固定高
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 写错了，还是浏览器悄悄绕过了你。
