如何仅用HTML和CSS修复头部图片与导航栏重叠及下移问题？

问题分析 #

添加头部图片后出现两个核心问题：

1. 导航按钮下移并与头部图片重叠：按钮使用position:absolute默认相对视口定位，头部图片占据文档流空间后，视觉上按钮被挤到图片下方，实际是按钮仍在视口原位置，与图片发生重叠。
2. HTML结构不规范：.header-image放在了<body>标签外，导致浏览器渲染异常。
3. z-index未生效：只有定位元素（position不为static）的z-index才会起作用，之前的结构问题也间接影响了层级渲染。

修复步骤（纯HTML+CSS） #

1. 修正HTML结构 #

把头部图片容器移到<body>内部，确保符合HTML规范：

<link rel="stylesheet" href="ii.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<body>
  <div class="header-image"></div>
  <input type="checkbox" id="check">
  <label for="check">
      <i class="fas fa-bars" id="btn"></i>
      <i class="fas fa-times" id="cancel"></i>
    </label>
  <div class="sidebar">
    <header>help</header>
    <ul>
      <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
      <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
      <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
      <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
      <li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
      <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
      <li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
    </ul>
  </div>
  <section></section>
</body>

2. 调整导航按钮定位 #

将按钮改为position:fixed固定在视口，同时调整top值避开头部图片（头部高度300px）：

label #btn,
label #cancel {
  position: fixed; /* 固定在视口，不受文档流影响 */
  background: #042331;
  border-radius: 3px;
  cursor: pointer;
}

label #btn {
  left: 40px;
  top: 325px; /* 原top值25px + 头部高度300px，移到图片下方 */
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all .5s;
}

label #cancel {
  z-index: 1111;
  left: -195px;
  top: 317px; /* 对应调整位置 */
  font-size: 30px;
  color: #0a5275;
  padding: 4px 9px;
  transition: all .5s ease;
}

3. 确保侧边栏层级正常 #

侧边栏已有position:fixed和z-index:999，取消按钮的z-index:1111高于侧边栏，这个设置是正确的，结构正常后z-index会生效，取消按钮能显示在侧边栏上方。

4. 优化section布局（可选） #

让section占据头部图片下方的剩余视口高度：

section {
  background: url(bg.jpeg) no-repeat;
  background-position: center;
  background-size: cover;
  min-height: calc(100vh - 300px); /* 减去头部图片高度 */
  transition: all .5s;
}

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