移动端滚动时H1遮挡导航栏的CSS布局问题修复方案

滚动时H1遮挡顶部导航栏由3个代码问题共同导致：

• .banner容器未设置position: relative，内部用position: absolute定位的.content区块脱离正常文档流，会相对于视口而非banner容器定位，滚动时会悬浮在页面其他内容上方
• 固定在顶部的导航栏未设置足够高的z-index层级，显示优先级低于普通页面内容
• 移动端适配规则不全：H1字号过大、banner高度设置不合理、content无右侧边距，导致内容溢出加剧遮挡问题

直接修改对应CSS代码即可，不需要改动HTML结构：

1. 修改.banner样式，创建独立定位上下文，约束内部绝对定位元素的作用范围，同时修复背景图拉伸问题
2. 给顶部固定导航栏设置高层级，保证始终悬浮在所有内容上方
3. 补全移动端适配规则，调整字号、容器高度、内容偏移，避免内容溢出

修改后的完整CSS代码 #

/* 替换原有的.banner样式 */
.banner {
  background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
  height: 800px;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* 替换原有的.content样式 */
.content {
  top: 25%;
  left: 5%;
  position: absolute;
  z-index: 1;
}

.content h1 {
  color: black;
  font-size: 3em;
  font-weight: bold;
}

.content a {
  text-decoration: none;
  background-color: var(--primary-color);
  color: #fff;
  padding: 15px 40px;
  border-radius: 5px;
}

.content a:hover {
  background-color: #64cff7;
  color: #fff;
}

.stepBox {
  background-color: #64cff7;
  padding: 20px 20px;
  border-radius: 5px;
  text-align: center;
}

.stepBox h1 {
  font-size: 30px;
  font-weight: bold;
  color: black;
}

.stepBox p {
  font-size: 20px;
  font-style: italic;
  color: #fff;
}

.highlight {
  color: var(--primary-color);
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

.cakebox {
  padding: 10px 5px;
}

.cakebox img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
}

.cakebox h1 {
  font-size: 18px;
  margin-top: 20px;
  font-weight: bold;
}

.viewmorebtn {
  text-decoration: none;
  background-color: #64cff7;
  color: #fff;
  padding: 10px 10px;
  border-radius: 5px;
  font-size: 18px;
}

.viewmorebtn i {
  padding-left: 5px;
}

/* 新增顶部导航栏样式，请将.navbar替换为项目中实际的导航栏类名 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

/* 替换原有的移动端媒体查询规则 */
@media screen and (max-width:600px) {
  .banner {
    height: 450px;
  }
  .content {
    top: 30%;
    right: 5%;
  }
  .content h1 {
    font-size: 2em;
  }
}

• .content区块会被严格限制在.banner容器范围内，滚动时会跟随banner容器正常移出视口，不会再悬浮遮挡其他内容
• 导航栏z-index设置为999，优先级高于所有普通页面内容，滚动时永远显示在最上层
• 背景图从100%改为cover，解决移动端下背景图拉伸变形的隐藏问题
• 移动端字号、边距、高度适配后，不会再出现内容溢出屏幕的情况

内容的提问来源于stack exchange，提问作者Ján Andrejko