本文介绍一种基于 CSS Grid 的现代方案，让导航栏以 position: sticky 方式悬浮于主内容上方，同时保持主区块背景色可横向铺满全屏，避免被导航栏遮挡或挤压。

本文介绍一种基于 css grid 的现代方案，让导航栏以 `position: sticky` 方式悬浮于主内容上方，同时保持主区块背景色可横向铺满全屏，避免被导航栏遮挡或挤压。

在构建响应式单页应用或长文档布局时，常需一个始终可见的侧边导航栏（如锚点跳转菜单），但又不希望它占用主内容区域的宽度或破坏背景色的视觉延展性。传统 float 或 position: absolute/fixed 方案容易导致内容偏移、滚动错位或响应式失效；而直接对 .nav 使用 position: sticky 且置于 .main 内部 flex 布局中，又会因父容器限制导致“粘性”失效或无法真正覆盖内容。

推荐解法：CSS Grid 区域重叠 + 自定义变量控制

核心思路是利用 CSS Grid 的 grid-template-columns 定义显式列轨道，并通过命名区域（如 content 和 nav）让 .content 与 .nav 在同一网格容器中逻辑并列、视觉重叠——即导航栏占据右侧固定宽度列，而主内容区域的 padding-right 动态预留该宽度，使其文本内容不被遮挡；同时，.content 的背景色仍可自然延伸至视口最右边缘（因 padding 不影响 background 绘制范围）。

以下是完整实现：

:root {
  --nav-width: 150px; /* 导航栏宽度，便于统一维护与响应式调整 */
}

.header, .footer {
  background-color: silver;
  height: 40vh;
}

.main {
  display: grid;
  /* 定义两列：主内容占 1fr，导航栏占固定宽度；
     使用命名线 [content-start] / [nav-start] / [content-end nav-end] 实现语义化定位 */
  grid-template-columns: [content-start] 1fr [nav-start] var(--nav-width) [content-end nav-end];
}

.nav {
  grid-area: nav; /* 占据右侧命名列区域 */
}

.content {
  grid-area: content; /* 占据左侧主内容区域 */
  /* 关键：右侧留白 = 导航栏宽度 + 原有内边距，确保文字不被遮挡 */
  padding-right: calc(20% + var(--nav-width));
}

.nav > .navcontent {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.content > .block {
  min-height: 80vh;
  padding-left: 20%; /* 左侧内边距保持居中阅读体验 */
  /* 背景色将自动铺满整行（含 nav 下方区域），达成「视觉上覆盖」效果 */
}

.content > .block.-b1 { background-color: aqua; }
.content > .block.-b2 { background-color: teal; }
.content > .block.-b3 { background-color: blue; }

<header class="header"><h1>Header</h1></header><main class="main"><nav class="nav"><ul class="navcontent">
<li><a href="#b1">Link 1</a></li>
      <li><a href="#b2">Link 2</a></li>
      <li><a href="#b3">Link 3</a></li>
    </ul></nav><div class="content">
    <div id="b1" class="block -b1">
      <h1>My content</h1>
      <p>...</p>
    </div>
    <div id="b2" class="block -b2">
      <p>...</p>
    </div>
    <div id="b3" class="block -b3">
      <p>...</p>
    </div>
  </div>
</main><footer class="footer"><h1>Footer</h1></footer>

✅ 优势总结：

• 真·覆盖式粘性：.nav 独立列轨道 + sticky，不侵占 .content 流式空间，背景色无干扰；
• 响应式友好：通过 :root 变量统一控制宽度，配合媒体查询可轻松适配移动端（例如 @media (max-width: 768px) { --nav-width: 0; } 隐藏导航）；
• 语义清晰：Grid 命名区域提升可维护性，HTML 结构更符合内容优先原则；
• 无障碍兼容：导航仍位于 DOM 正常流中，支持键盘聚焦与屏幕阅读器。

⚠️ 注意事项：

• 确保 .main 为 grid 容器，且 .nav 与 .content 是其直系子元素（顺序可调，但必须同级）；
• position: sticky 的 top 值需根据实际布局微调（如存在 header 高度，可设为 top: 40vh）；
• 若需导航栏随页面滚动始终可见（而非仅在 .main 内部粘性），应将其提升至 级别并配合 position: fixed —— 但此方案将失去与 .main 的网格协同，需额外处理 z-index 与内容偏移。

  该方案兼顾现代 CSS 特性与实用需求，是实现「既粘性、又覆盖、还响应」导航栏的稳健选择。