HTML实现双头部布局重叠异常求助（Django开发环境）

开发者阿泽

2026-10-19

双头部重叠问题解决方案

问题根因

你当前提供的CSS仅定义了导航链接的文本样式，缺失.site-header本身的布局规则，重叠通常由定位规则异常、父容器高度塌陷导致：

若.site-header设置了position: fixed/position: absolute，会脱离正常文档流，第二个头部会直接向上偏移和第一个重叠
若头部内部元素使用了浮动未清除，会导致父容器高度塌陷，两个section的间距消失产生重叠

修复方案

方案1：头部为固定定位场景

如果需要第一个头部固定在页面顶部，给头部加基础布局规则，同时给第二个父容器section设置顶部偏移即可，参考CSS如下：

/* 新增头部基础布局规则，高度根据你实际内容调整 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 100;
  background-color: #343a40; /* 补全背景色，避免透明重叠 */
}
/* 给第二个section设置顶部边距，值和头部高度一致 */
body > section:nth-of-type(2) {
  margin-top: 70px;
}

/* 原有样式保留 */
.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

方案2：头部为普通文档流场景

如果两个头部都需要跟随页面滚动，仅需要清除浮动避免高度塌陷即可：

/* 新增清除浮动规则 */
.site-header {
  overflow: hidden;
}
/* 或者用标准清除浮动伪元素，兼容性更好 */
.site-header::after {
  content: "";
  display: table;
  clear: both;
}

/* 原有样式保留 */
.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}