滚动页面时图片覆盖Navbar问题的排查与解决

我正在为学校搭建网站，遇到一个问题：页面滚动时图片会覆盖顶部的Navbar。我是前端新手，试过fixed定位和各种z-index设置都没效果，求帮助。

原代码 #

CSS代码 #

body {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 19px 20px;
  background: #DCdCdC
}

.logo {
  position: fixed;
  top: -10px;
  font-size: 32px;
  padding: 20px 20px;
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}

.navbar a {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  margin-left: 400px;
  word-spacing: 2px;
}

* {
  box-sizing: border-box;
}

.column {
  position: relative;
  bottom: -20em;
  float: right;
  width: 33.33%;
  padding: 10px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

HTML代码 #

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="fashion" content="width=device-width, initial-scale=1">
  <title>fashion</title>
  <link rel="stylesheet" type="text/css" href="style_2_Seite.css" media="all" />

</head>

<body>
  <header class="header">
    <a href="1-Seite.html" class=l ogo>fashion</a>
    <nav class="navbar">
      <a href="1-Seite.html">Home</a>
      <a href="2-Seite.html">Shop</a>
      <a href="#">Über uns</a>
    </nav>
  </header>

  <div class="row">
    <div class="column">
      <img src="bb.hoodie.png" width="70%;">
    </div>

    <div class="column">
      <img src="bbjacke.png" width="70%;">
    </div>

    <div class="column">
      <img src="nfs.hose.png" width="70%;">
    </div>

    <div class="column">
      <img src="ro.coat 2.png" width="70%;">
    </div>

    <div class="column">
      <img src="nfs.bomber.png" width="70%;">
    </div>

    <div class="column">
      <img src="ro.coat.png" width="70%;">
    </div>
  </div>


</body>

</html>

问题根源与修复步骤 #

问题点 #

1. 导航栏未明确设置z-index，且子元素logo重复使用fixed定位，导致堆叠上下文混乱
2. HTML中logo的class属性拼写错误（class=l ogo）
3. 内容区域用bottom:-20em定位，易和fixed导航栏产生层级冲突
4. meta标签的name属性错误，应为viewport而非fashion

修正后的代码 #

CSS代码

body {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 0; /* 移除默认body外边距 */
  padding-top: 80px; /* 给固定导航栏预留空间，避免内容被遮挡 */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 19px 20px;
  background: #DCdCdC;
  z-index: 999; /* 设置足够高的层级，确保导航栏在最上层 */
}

.logo {
  /* 移除fixed定位，继承header的fixed即可 */
  font-size: 32px;
  padding: 20px 20px;
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}

.navbar a {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  margin-left: 40px; /* 调整间距，避免导航链接溢出屏幕 */
  word-spacing: 2px;
}

* {
  box-sizing: border-box;
}

.column {
  float: right;
  width: 33.33%;
  padding: 10px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

HTML代码

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 修正meta属性 -->
  <title>fashion</title>
  <link rel="stylesheet" type="text/css" href="style_2_Seite.css" media="all" />

</head>

<body>
  <header class="header">
    <a href="1-Seite.html" class="logo">fashion</a> <!-- 修正class拼写错误 -->
    <nav class="navbar">
      <a href="1-Seite.html">Home</a>
      <a href="2-Seite.html">Shop</a>
      <a href="#">Über uns</a>
    </nav>
  </header>

  <div class="row">
    <div class="column">
      <img src="bb.hoodie.png" width="70%;">
    </div>

    <div class="column">
      <img src="bbjacke.png" width="70%;">
    </div>

    <div class="column">
      <img src="nfs.hose.png" width="70%;">
    </div>

    <div class="column">
      <img src="ro.coat 2.png" width="70%;">
    </div>

    <div class="column">
      <img src="nfs.bomber.png" width="70%;">
    </div>

    <div class="column">
      <img src="ro.coat.png" width="70%;">
    </div>
  </div>


</body>

</html>

关键说明 #

• z-index设置：给fixed定位的.header添加z-index:999，确保它处于所有页面元素的最上层，不会被图片覆盖
• 移除logo的fixed定位：.header已经是fixed，子元素logo不需要重复设置，否则会脱离父元素的堆叠上下文，导致z-index失效
• 内容布局调整：用body的padding-top代替column的bottom:-20em，让内容自然排列，避免定位冲突
• 修正拼写错误：修复class和meta标签的错误，确保代码正常运行

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