如何在全屏背景图顶部加导航且不偏移100vh的section区块？

嘿，这个问题我之前帮好几个开发者捋清楚过，核心就是利用CSS定位让导航脱离正常文档流——既不会把你的100vh Section挤下去，也不会被valign-wrapper的垂直居中影响。下面给你两种靠谱的实现方式：

方案一：Section内部嵌套绝对定位导航（最推荐） #

这个方法让导航属于Section的一部分，但不占据Section的空间，完美适配你的需求：

步骤1：修改HTML结构 #

把导航放在你的#home Section内部，放在最前面：

<div class="section valign-wrapper" id="home">
  <!-- 导航菜单 -->
  <nav class="top-navigation">
    <a href="#home">首页</a>
    <a href="#about">关于</a>
    <a href="#contact">联系我们</a>
  </nav>

  <!-- 原来Section里的垂直居中内容 -->
  <div class="valign">
    <h1>这里是垂直居中的标题</h1>
  </div>
</div>

步骤2：添加CSS样式 #

给Section设置相对定位，再给导航设置绝对定位固定在顶部：

#home {
  position: relative; /* 让内部绝对定位元素以它为基准 */
  height: 100vh;
  background: url('你的背景图路径') center/cover no-repeat;
}

.top-navigation {
  position: absolute; /* 脱离正常文档流，不占用Section空间 */
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 20px;
  background-color: rgba(0, 0, 0, 0.6); /* 可选：加半透明背景提升文字可读性 */
  z-index: 10; /* 确保导航在背景图和其他内容上方 */
}

.top-navigation a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
}

为什么这个方法有效？

• position: relative给Section建立了定位上下文，让导航的绝对定位相对于Section而不是整个页面
• 绝对定位的导航脱离了文档流，不会让Section被“挤”下移，Section依然保持100vh高度，背景图完整显示
• 导航不会被valign-wrapper的垂直居中规则影响，稳稳固定在顶部

方案二：外部导航+Section负margin（备选） #

如果你的导航必须放在Section外面，可以用这个方法抵消导航高度带来的下移：

/* 假设导航高度是60px */
.top-navigation {
  height: 60px;
  background-color: #333;
}

#home {
  height: 100vh;
  margin-top: -60px; /* 用负margin抵消导航高度 */
  padding-top: 60px; /* 防止Section内部内容被导航遮挡 */
  background: url('你的背景图路径') center/cover no-repeat;
}

不过这个方法需要你知道导航的固定高度，不如方案一灵活，所以优先推荐方案一。

内容的提问来源于stack exchange，提问作者Dan