当使用 position: fixed 创建导航栏时，页面内容会因脱离文档流而被导航栏覆盖；解决方法是为主要内容区域设置 top 偏移量，使其避开固定导航栏高度。
当使用 `position: fixed` 创建导航栏时，页面内容会因脱离文档流而被导航栏覆盖；解决方法是为主要内容区域设置 `top` 偏移量，使其避开固定导航栏高度。
在构建响应式网站时，固定定位（position: fixed）的导航栏能始终停留在视口顶部，提升用户体验。但一个常见误区是：仅将导航栏设为 fixed，却未为后续内容预留垂直空间，导致正文从 <body> 顶部开始渲染，直接被导航栏遮盖。
核心问题分析
- .nav-bar-container 设置了 position: fixed，脱离文档流，不占据原始空间；
- .content 默认 position: static，其起始位置仍是 <body> 顶部（y=0），与固定导航栏重叠；
- 即使 .content 被包裹在 <div class="body"> 内，若未显式设置定位或外边距，仍无法自动“下移”。
正确解决方案：用 top 为内容留出安全间距
最直接、语义清晰且兼容性好的方式是：
✅ 将 .content 设为 position: relative 或 absolute，并设置 top 值，使其下移至导航栏下方。
.content {
position: relative; /* 推荐：保持文档流，避免布局意外 */
top: 60px; /* 值需匹配导航栏实际高度（含 padding） */
}? 如何确定 top 的合理值？
检查 .nav-bar-container 的总高度：
- padding: 10px 40px → 垂直内边距 = 10px × 2 = 20px
- 字体大小、行高、元素间距等贡献剩余高度；实测建议初始设为 60px，再通过浏览器开发者工具微调。
进阶优化建议
-
避免硬编码 top：对响应式设计，可结合 CSS 自定义属性动态计算：
:root { --navbar-height: 60px; } .content { margin-top: var(--navbar-height); } - 移动端适配：在媒体查询中同步调整 --navbar-height（如折叠菜单后高度变化）；
-
侧边栏背景一致性：原代码中 .nav-bar-side 的 background 使用了 #e7e7e7ad（带透明度），而 .show 类误写为 #e7e7e7ad（重复）且未覆盖全部状态，应统一为：
.nav-bar-side, .nav-bar-side.show { background: #e7e7e7aa; /* 统一透明背景 */ } - 结构语义化：.content 应直接位于 <body> 下（而非嵌套在 .body 内），避免多余 wrapper 干扰定位逻辑。
总结
修复固定导航栏遮挡内容的关键，不是调整导航本身，而是主动为内容区域声明垂直偏移。top 或 margin-top 是最可靠手段，配合开发者工具测量与 CSS 变量管理，即可实现健壮、可维护的布局。切记：fixed 元素不会“推走”其他元素，必须由内容自身让出空间。
