解决固定导航栏遮挡内容的问题：CSS布局与内容偏移

在网页开发中，固定定位的导航栏能始终停留在视口顶部，方便用户随时操作，但很容易出现遮挡页面主体内容的问题。比如页面刚加载时，内容区域的第一部分会被导航栏盖住，用户需要手动下滑才能看到完整内容，体验很差。下面我们就来分析这个问题的成因，以及几种常用的解决方案。

问题成因分析

当导航栏使用 position: fixed 属性时，它会脱离正常的文档流，不再占据原本的页面空间。此时页面内容会从视口的最顶部开始排列，而固定导航栏会覆盖在内容上方，就出现了遮挡问题。要解决这个问题，核心思路就是让内容区域在导航栏的位置留出足够的空间，避免被覆盖。

方案一：给内容区域添加上内边距

这是最简单直接的解决方式，直接给页面主体内容容器添加和导航栏高度相同的上内边距，让内容整体向下偏移，避开导航栏的范围。

首先我们看基础的HTML结构，导航栏和内容区域的代码如下：

<!-- 固定导航栏 -->
<nav class="fixed-nav">
  <ul>
    <li>首页</li>
    <li>产品</li>
    <li>关于我们</li>
  </ul>
</nav>

<!-- 页面主体内容 -->
<main class="content">
  <section class="section">
    <h2>第一部分内容</h2>
    <p>这里是页面的第一部分内容，需要避免被导航栏遮挡。</p>
  </section>
  <section class="section">
    <h2>第二部分内容</h2>
    <p>这里是页面的第二部分内容。</p>
  </section>
</main>

对应的CSS样式，先设置固定导航栏的高度和定位，再给内容区域添加上内边距：

/* 固定导航栏样式 */
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 导航栏高度设为60px */
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100; /* 确保导航栏在内容上方 */
}

.fixed-nav ul {
  display: flex;
  list-style: none;
  height: 100%;
  align-items: center;
  padding: 0 20px;
  margin: 0;
}

.fixed-nav li {
  margin-right: 30px;
  font-size: 16px;
}

/* 内容区域样式，添加上内边距避开导航栏 */
.content {
  padding-top: 60px; /* 和导航栏高度一致 */
}

.section {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

这种方式的优点是逻辑简单，兼容性好，几乎所有浏览器都支持。缺点是如果导航栏高度是动态变化的（比如响应式场景下导航栏高度随屏幕宽度改变），就需要手动同步调整内边距的数值，维护成本会稍高一些。

方案二：使用CSS变量动态适配导航栏高度

如果导航栏高度是动态的，我们可以借助CSS变量来统一管理高度值，避免重复修改。只需要定义一次导航栏高度变量，导航栏和内容区域都引用这个变量，后续修改高度时只需要改一处即可。

修改后的CSS代码如下：

/* 定义CSS变量，存储导航栏高度 */
:root {
  --nav-height: 60px;
}

/* 固定导航栏样式，引用变量设置高度 */
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height); /* 使用变量 */
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
}

.fixed-nav ul {
  display: flex;
  list-style: none;
  height: 100%;
  align-items: center;
  padding: 0 20px;
  margin: 0;
}

.fixed-nav li {
  margin-right: 30px;
  font-size: 16px;
}

/* 内容区域引用变量设置上内边距 */
.content {
  padding-top: var(--nav-height); /* 使用变量，和导航栏高度同步 */
}

.section {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

如果需要在响应式场景下调整导航栏高度，比如在移动端把导航栏高度改为50px，只需要修改媒体查询里的变量值即可：

/* 移动端适配，修改导航栏高度变量 */
@media (max-width: 768px) {
  :root {
    --nav-height: 50px;
  }
}

这种方式比方案一更灵活，适合导航栏高度会变化的场景，维护起来更方便。

方案三：使用伪元素占位

如果不想直接修改内容区域的内边距，也可以通过给导航栏添加伪元素，让伪元素占据导航栏的高度，从而把内容区域挤下去。不过这种方式需要注意伪元素的定位设置。

对应的CSS代码如下：

:root {
  --nav-height: 60px;
}

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
}

/* 给导航栏添加伪元素占位 */
.fixed-nav::before {
  content: '';
  display: block;
  height: var(--nav-height);
  width: 100%;
}

.fixed-nav ul {
  display: flex;
  list-style: none;
  height: 100%;
  align-items: center;
  padding: 0 20px;
  margin: 0;
}

.fixed-nav li {
  margin-right: 30px;
  font-size: 16px;
}

/* 内容区域不需要额外设置内边距 */
.content {
  /* 无需设置padding-top */
}

.section {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

这种方式的原理是伪元素会在导航栏内部占据空间，由于导航栏是固定定位，伪元素的高度会撑开页面顶部的空间，让后续内容从伪元素下方开始排列。不过这种方式的兼容性稍弱，部分旧版本浏览器对伪元素的支持可能有问题，实际开发中用得相对较少。

方案对比与选择建议

我们可以把三种方案的特点整理成表格，方便大家根据场景选择：

实际开发中，最推荐的是第二种CSS变量方案，既灵活又容易维护，只要项目不需要兼容IE浏览器就可以放心使用。如果必须兼容旧浏览器，再选择第一种简单的内边距方案即可。

固定导航栏内容遮挡CSS布局上内边距CSS变量