直接加 position: fixed 能固定导航栏，但必须为 body 设置等于导航高度的 padding-top（如 60px）并设 z-index ≥1000，否则内容被遮挡、下拉菜单失效；移动端需用汉堡菜单适配。
直接加 position: fixed 就能固定在顶部，但不处理 body 的 padding-top 和 z-index，内容一定会被遮挡——这是仪表盘里最常踩的坑。
用 position: fixed 固定导航栏位置
仪表盘页面通常内容密集、滚动频繁，必须让导航始终可见。核心样式只有四行：
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
注意：它会脱离文档流，后续所有内容都会从页面顶部开始渲染，直接叠在导航下面。
必须给 body 补上 padding-top
否则仪表盘的图表、卡片、表格全会被导航栏盖住。补多少？至少等于导航栏高度：
- 如果
.navbar高度是60px（含 padding），body就得加padding-top: 60px - 别用
margin-top—— 它不影响文档流起始位置，无效 - 如果导航高度动态（比如响应式折叠后变矮），用 CSS 自定义属性 + JS 更新更稳妥
z-index 不设够高，下拉菜单和弹窗会失效
仪表盘常用 select、日期控件、图表 tooltip，它们默认 z-index 往往低于 100。导航栏至少设为：
.navbar {
z-index: 1000;
}
常见错误：
- 只设
z-index: 1—— 够显示，但压不住第三方组件的弹层 - 父容器（如
main或仪表盘 wrapper）有transform或will-change—— 会创建新层叠上下文，导致z-index失效，此时得把导航提到同级或更高层级
仪表盘场景下，别忽略移动端断点处理
横向空间紧张时，强行铺开所有菜单项会导致换行或溢出。建议：
- 小屏（
max-width: 768px）下改用汉堡按钮 +display: flex; flex-direction: column展开 - 避免在导航里塞太多图标+文字组合，仪表盘用户更依赖快捷入口，精简到 5–7 项为宜
- 如果用了框架（如 Chart.js、AG Grid），确认其 tooltip 容器是否挂载在
body下——否则固定导航可能遮挡它们
真正麻烦的不是加导航栏，而是它和图表容器、模态框、第三方 UI 组件之间的层叠关系和尺寸耦合。每次改一个 z-index 或 height，都得连带检查三处地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
