我目前正在为我的学校开发一个网站，我遇到的问题是，每当我向下滚动时，图像就会越过我的导航栏。 我是一个完全的初学者，不知道问题可能出在哪里或如何解决。我已经看过一些教程，但找不到我的问题的正确答案。 我已经尝试过固定位置和任何类型的 z-index 之类的东西，但它不起作用： 有人可以帮助我吗？
My 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= logo>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>
My 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;
}
我知道很多，但我希望得到一些帮助。
当您将 z-index 添加到标头以将其提升到 HTML 中后面的内容上方时，它似乎工作得很好，因为您已经将其定位（固定），因此它获得了堆叠上下文。
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;
z-index: 1;
}
.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;
img {
background-color: maroon;
}
}
.row::after {
content: "";
display: table;
clear: both;
}
.row {
padding-bottom: 500px;
}<header class="header">
<a href= "1-Seite.html" class= logo>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>