用 position: sticky 实现吸顶导航栏最关键的是父容器不能有 overflow 隐藏、不能由 transform/filter 触发层叠上下文，且必须设置具体 top 值；否则 sticky 会静默失效。
直接说结论：用 position: sticky 实现吸顶导航栏，最关键是父容器不能有 overflow 隐藏、不能是 transform 或 filter 触发的层叠上下文，且必须设置 top 值——否则它根本不会“粘”。
为什么 position: sticky 不生效？常见失效原因
不是代码写错了，而是被“看不见的规则”拦住了：
-
sticky元素的任意祖先元素设置了overflow: hidden、auto或scroll，就会中断粘性行为 - 祖先元素用了
transform、filter、will-change等，会创建新的层叠上下文，导致sticky失效 - 没写
top（或bottom），比如只写了position: sticky，浏览器当普通static处理 - 父容器高度不够，或者内容没滚动到触发位置，就误以为“没反应”
基础写法与必要条件
一个能跑通的最小闭环：
header {
position: sticky;
top: 0;
background: white;
z-index: 100;
}
注意三点：
-
top必须是具体值（0、1rem都行），不能是auto或空着 - 别忘了
z-index，否则可能被后面内容盖住 - 确保
<header></header>在文档流中是正常块级元素，没被display: flex父容器意外压缩高度
在 Flex/Grid 布局里怎么用？
Flex 容器本身不破坏 sticky，但容易踩两个坑：
- 如果
header是flex子项，且父容器设了align-items: center，可能导致它被居中而“悬空”，实际离顶部有距离，top: 0就失准了 - Grid 中若把
header放进某个grid-area，要确认该区域没被overflow包裹（比如用article套了一层带overflow: auto的滚动区） - 稳妥做法：给
header加align-self: flex-start（Flex）或justify-self: start（Grid），强制它贴顶
兼容性和降级方案
position: sticky 在现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+）都支持，但 iOS Safari 13.0 及更早版本有严重 bug：滚动时卡顿、错位甚至消失。
如果必须兼容老 iOS：
- 可以用
@supports (position: sticky)做特性检测，不支持时 fallback 到position: fixed - 但要注意：
fixed会脱离文档流，需手动给 body 加padding-top补高度，否则内容会上移遮挡 - 别用 JS 模拟 sticky（比如监听 scroll），性能差、抖动明显，且在 touch 设备上延迟高
真正麻烦的从来不是写那行 position: sticky，而是排查哪个祖先偷偷加了 transform 或 overflow —— 浏览器不会报错，它只是默默放弃粘性。打开 DevTools，一层层看 computed 样式里的 position 值，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
