加 padding-top 是解决 fixed 导航栏遮挡内容的关键，因 fixed 使元素脱离文档流；bootstrap 5 应用 .fixed-top 类并确保 navbar 为 body 直接子级，配合动态 offset 处理 scrollspy 冲突。
为什么加了 position: fixed 导航栏却遮住下面的内容
因为 position: fixed 会让元素脱离文档流，原本占位消失，后面内容直接上移顶到页面顶部，被导航栏盖住。这不是 bug，是 CSS 的正常行为。
- 必须手动给
或紧接导航栏后的容器加padding-top（值 ≥ 导航栏高度） - Bootstrap 5 的默认 navbar 高度不是固定值，响应式下会变；用
getComputedStyle或 DevTools 查真实高度更稳妥 - 如果用了 Bootstrap 的
.navbar-expand-*类，折叠/展开时高度变化，纯 CSSpadding-top可能失效
Bootstrap 5 中正确设置固定导航栏的 class 组合
别自己写 position: fixed —— Bootstrap 5 已内置 .fixed-top，它不只是加 position: fixed，还处理了 z-index、宽度和 top 值。
- 必须把 navbar 放在
直接子级，否则.fixed-top的top: 0会相对于父容器定位 - 搭配使用
.sticky-top是错的：.sticky-top是 relative → fixed 的临界切换，不是真正固定 - 若同时用
.navbar-dark和.bg-dark，注意z-index是否被覆盖（默认.fixed-top是 1030）
移动端下 fixed 导航栏滚动卡顿或闪烁
iOS Safari 和部分安卓 WebView 对 position: fixed 优化差，尤其页面有大量重绘或 transform 时。
- 加
transform: translateZ(0)或will-change: transform强制 GPU 加速（但别滥用，可能增加内存） - 避免在 fixed 元素内用
overflow: scroll，容易触发合成层冲突 - Bootstrap 5 的
.fixed-top默认没开硬件加速，需要自己补：
body .navbar.fixed-top {
will-change: transform;
}
和 Bootstrap 的 Scrollspy 冲突怎么办
Scrollspy 依赖元素在视口中的位置计算激活项，而 fixed-top 导航栏本身不滚动，但它内部的 <nav></nav> 或 <ul></ul> 如果也设了 position: fixed，就会干扰 offset 判断。
- 确保只对最外层
<nav class="navbar fixed-top"></nav>应用.fixed-top，不要在内部菜单上再加定位 - 初始化 Scrollspy 时显式传入
offset，补偿 fixed 导航栏高度：data-offset="56"（56px 是常见 navbar 高） - 如果用 JS 初始化，
offset最好动态读取：document.querySelector('.fixed-top').offsetHeight
position: fixed，实际要盯住布局位移、响应式高度变化、移动端渲染性能、以及和其它 JS 组件的 offset 协同——最容易漏的是那个 padding-top，加完以为好了，一缩放窗口或切到手机就露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
