导航栏固定后内容被遮挡的解决方法是为body设置padding-top以预留空间：Bootstrap 3需设为50px，Bootstrap 4/5默认为56px；若navbar高度变化，须用开发者工具确认实际高度并同步调整，不可用margin-top替代。
导航栏固定后内容被遮挡的典型表现
页面滚动时，.navbar-fixed-top（Bootstrap 3）或 .fixed-top（Bootstrap 4/5）确实让导航栏始终可见，但正文顶部常被直接盖住——这不是 CSS 写错了，而是固定定位脱离文档流后，后续元素没“让出空间”。浏览器不会自动给 <body> 或第一个内容区块加 margin/padding 来避让。
Bootstrap 3 中必须手动补足 body 的上边距
Bootstrap 3 的 .navbar-fixed-top 高度默认为 50px，它不改变其他元素布局。你得主动告诉 <body>：“你开头得空出这块地方”。
- 在自定义 CSS 中添加：
body { padding-top: 50px; } - 如果用了带品牌 logo 的 navbar（高度变高），或加了
.navbar-inverse、自定义font-size导致实际高度变化，务必用浏览器开发者工具检查.navbar的真实offsetHeight，然后同步调整padding-top - 不要用
margin-top替代padding-top：margin 会把整个 body 下推，可能造成顶部留白异常或背景色错位
Bootstrap 4/5 中 .fixed-top 同样需要补偿，但方式更灵活
虽然 Bootstrap 4+ 官方文档建议配合 .pt-5 等间距工具类，但那只是快捷写法，本质仍是控制首屏内容的上内边距。问题没变，解法逻辑一致。
- 最稳妥做法仍是：
body { padding-top: 56px; }（因默认.fixed-top高度为 56px） - 若项目已大量使用工具类，可在第一个内容容器（如
<main>或<div class="container">）上加pt-5（对应 3rem ≈ 48px）或pt-6（4rem ≈ 64px），但需确认是否匹配实际 navbar 高度 - 注意响应式：移动端 navbar 折叠后高度可能不同（比如汉堡菜单展开时更高），纯静态
padding-top无法自适应；此时需配合 JS 监听resize或用 CSS 自定义属性动态计算，但多数项目只需保证桌面端不遮挡即可
绝对不要依赖 position: relative + top 模拟固定效果
有人试图给 navbar 加 position: relative 和 top: 0，再用 z-index 提升层级——这根本不是固定定位，滚动时 navbar 会随页面一起动，完全失效。
立即学习“前端免费学习笔记（深入）”；
- 固定定位必须用
position: fixed，且需明确top: 0、left: 0、right: 0 - Bootstrap 的
.fixed-top已内置这些声明，你只需确保它被正确应用（检查是否有拼写错误，如写成fix-top） - 若 navbar 在某些设备上突然“消失”，大概率是父容器设置了
overflow: hidden或transform属性，导致 fixed 元素被裁剪——这时要查祖先节点的 CSS，而不是改 navbar 自身
