如何让Checkbox实现的下拉导航栏覆盖下方图片？

要让下拉内容覆盖在图片上方而不挤压布局，核心是让下拉容器脱离正常文档流，这样它的显示不会影响其他元素的位置。具体修改如下：

修改要点： #

• 给.drop-down添加position: relative，作为下拉内容的定位参考容器
• 给.content设置position: absolute，同时指定width: 100%，让它脱离文档流并占满父容器宽度
• 保留z-index确保下拉内容在图片上方

修改后的完整代码： #

CSS

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
}

header {
  display: grid;
  grid-template-rows: auto 1fr;
}

.drop-down {
  grid-row: 1;
  width: 100%;
  position: relative; /* 添加相对定位作为参考 */
}

label {
  cursor: pointer;
  background-color: var(--coral);
  display: flex;
  justify-content: center;
  padding: 1rem; /* 增加点击区域 */
}

[type="checkbox"] {
  display: none;
}

header a {
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
  width: 100%;
  padding: 1rem 0;
}

header a:hover {
  background-color: #040628;
}

.content {
  display: none;
  background-color: var(--blue);
  padding: 1rem 0;
  z-index: 1000;
  position: absolute; /* 绝对定位脱离文档流 */
  width: 100%; /* 占满父容器宽度 */
  top: 100%; /* 从按钮下方开始显示 */
}

[type="checkbox"]:checked+.content {
  display: block;
}

img {
  width: 100%; /* 修复图片宽度样式 */
}

HTML

<header>
  <div class="drop-down">
    <label for="checkbox">
      <span class="material-symbols-outlined">menu</span> <!-- 添加菜单图标 -->
    </label>
    <input type="checkbox" id="checkbox" />
    <div class="content">
      <a href="#">Home</a>
      <a href="#">New</a>
      <a href="#">Popular</a>
      <a href="#">Trending</a>
    </div>
  </div>
  <img src="https://images.unsplash.com/photo-1666609393250-5ddc8fa87fa9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0MTMxNTc&ixlib=rb-4.0.3&q=80" />
</header>

额外调整说明： #

• 把原HTML中放在<label>内的<link>标签移到规范位置（实际使用时建议放在<head>中）
• 给label增加内边距，提升点击交互体验
• 修复了原代码中.puzzles类未绑定到img标签的宽度样式问题

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