屏幕缩放时Header被图片遮挡问题排查（HTML/CSS）

问题核心原因 #

1. HTML语法错误：top-banner-holder的class属性缺少等号，可能引发样式解析异常
2. Header容器高度固定：.head-container设置了height:100px，小屏幕切换为垂直布局后，两个子项总高度超过100px，内容溢出容器，而Header未自适应高度，溢出部分被下方banner覆盖
3. z-index未生效：.head-container的z-index:1000没有对应的定位属性（position），无法实现层级置顶

修复步骤 #

1. 修正HTML语法错误
   将<div class"top-banner-holder">修改为：

<div class="top-banner-holder">

2. 调整Header的CSS设置

• 给.head-container添加position: relative，让z-index属性生效
• 把固定的height:100px替换为min-height:100px，确保小屏幕堆叠时容器能自适应高度容纳内容
• 可选：给.head-container添加统一背景色，避免子项溢出部分透明被banner穿透

修改后的完整代码 #

HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="assets/css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
    <div class="head-container">
        <div class="head-item-left">1</div>
        <div class="head-item-right">2</div>
    </div>
</header>
<div class="top-banner-holder"> 
    <div><img src="images/Southend Furniture Warehouse Store.jpg" class="top-banner-pic" alt="" /></div>
</div>

</body>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */
body {
  margin: 0;
  width: 100%;
  background-color: lightgrey;
}
* {
  box-sizing: border-box;
}
/* Header style */
.head-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
  min-height: 100px;
  position: relative;
  z-index: 1000;
  background-color: green;
}

.head-item-left {
  padding: 30px;
  flex: 50%;
}

.head-item-right {
  padding: 30px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .head-container {
    flex-direction: column;
  }
}
.top-banner-pic {
    width:  100%;
    height: 715px;
    object-fit: cover;
    object-position: 80% 100%;
}

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