当使用 position: fixed 创建导航栏时，若未为页面主体内容预留垂直空间，会导致内容被导航栏遮盖；正确做法是为 .content 设置 top 值（如 top: 60px），使其避开固定导航栏高度。
当使用 `position: fixed` 创建导航栏时，若未为页面主体内容预留垂直空间，会导致内容被导航栏遮盖；正确做法是为 `.content` 设置 `top` 值（如 `top: 60px`），使其避开固定导航栏高度。
在构建响应式网页时，固定定位（position: fixed）的导航栏因其始终可见的特性而广受欢迎，但一个常见且易被忽视的问题是：固定导航栏会脱离正常文档流，导致后续内容从页面顶部开始渲染，从而被导航栏覆盖。这正是你在代码中遇到的核心问题——.content 使用了 position: absolute 却未指定 top，致使大段文本直接从 <body> 顶部（即导航栏下方 0px 处）开始堆叠，视觉上形成“重叠”。
✅ 正确解决方案：为内容区域预留空间
最直接、语义清晰且兼容性最佳的方式，是为主要内容容器设置 top 偏移量，其值应 ≥ 导航栏的高度（含 padding 和 box-shadow）。观察你的 .nav-bar-container 样式：
.nav-bar-container {
padding: 10px 40px; /* 垂直内边距共 20px */
/* 无显式 height，但字体大小 + 行高 + 内边距约占用 60px */
}因此，将 .content 的样式修正为：
.content {
position: relative; /* 推荐改为 relative，避免绝对定位带来的布局脆弱性 */
top: 60px; /* 确保内容从导航栏下方开始渲染 */
padding: 20px; /* 可选：增加可读性内边距 */
}? 为什么不用 margin-top？
margin-top 在 position: absolute 元素上无效（绝对定位元素的 margin 不影响文档流位置）；而 top 是绝对定位的位移属性，精准可控。若改用 position: relative，则 margin-top: 60px 同样有效，且更符合语义（内容本身无需脱离文档流）。
⚠️ 注意事项与优化建议
- 避免全局 position: absolute：你原代码中 .content 设为 absolute 且无 top/left 定位，实际等效于 top: 0; left: 0，加剧了重叠。除非有特殊布局需求（如全屏覆盖层），否则主内容应保持 static 或 relative。
-
响应式适配：导航栏高度在移动端可能变化（例如图标尺寸、行高调整），建议结合 CSS 自定义属性动态计算：
:root { --navbar-height: 60px; } .nav-bar-container { height: var(--navbar-height); } .content { top: var(--navbar-height); } @media (max-width: 800px) { :root { --navbar-height: 52px; } /* 移动端微调 */ } - 侧边栏背景一致性：答案中提到“Change the bg for the side nav as well”，确需统一视觉层级。将 .nav-bar-side 的 background: #e7e7e7ad 改为与导航栏一致的 #e7e7e7aa，避免透明度差异造成的视觉割裂。
-
结构语义化：<div class="body"> 并非标准语义标签，建议直接使用 <main> 包裹内容区域，并确保 <nav> 作为导航语义容器：
<nav class="nav-bar-container">...</nav> <main class="content">...</main>
✅ 最终效果验证
应用上述修改后，页面将呈现清晰分层：
- 固定导航栏始终置顶；
- 主内容从导航栏正下方开始流式渲染，无遮挡；
- 点击菜单图标时，侧边栏（.nav-bar-side）按预期展开/收起，且背景与主栏协调。
这一方案不依赖 JavaScript 计算高度，纯 CSS 实现，性能高效、维护性强，是现代前端开发中处理固定导航栏内容避让的标准实践。
