我想给我的标题一个 Z-Index，但每次我把它放在标题上时都会被完全破坏，我不知道如何修复它。有人可以帮帮我吗？ 另外，我的盒子与导航栏/标题重叠，我可以使用 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;
z-index: 1;
}
.products .box-container{
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.products .box-container .box{
flex:1 1 30rem;
box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
border-radius: .5rem;
border: .1rem solid rgba(0,0,0,.1);
position: relative;
transition: 1s;
z-index: 0;
}
.products .box-container .box .image{
position:relative;
text-align: center;
padding-top: 2rem;
overflow: hidden;
}
.box:hover{
transform:scale(1.05);
z-index: 0;
}
.products .box-container .box .image .icons {
position: absolute;
bottom: 0; left:0; right: 0;
display: flex;
}
.products .box-container .box .image .icons a {
margin-left: 8rem;
margin-bottom: -3rem;
height: 4rem;
line-height:6rem;
font-size: 1.25rem;
width: 50%
background: black);
color:#000;
}
.products .box-container .box .content {
padding:2rem;
text-align: center;
}
.products .box-container .box .content h3 {
font-size:2rem;
color: #000;
}
.products .box-container .box .content price {
font-size:1.5rem;
color: black;
font-weight:bolder;
padding-top:1rem;
}
HTML：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>fashion</title>
<link rel="stylesheet" type="text/css" href="style_2_Seite.css" media="all" />
</head>
<body>
<div 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>
</div>
<section class="products" id="products">
<h1 class="heading"> latest <span> products</span> </h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="bb.hoodie.png" width="50%;" id="box" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>MEDIUM FIT B HOODIE</h3>
<div class="price"> 1.225€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="bbjacke.png" width="50%;" id="box" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>RACING JACKET</h3>
<div class="price"> 3.100€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="nfs.hose.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>HEAVY WASHED BOMBER</h3>
<div class="price">2.175€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="nfs.bomber.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>GREY INSIDE OUT BOMBER</h3>
<div class="price"> 2.750€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="ro.coat.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>HOODED COAT GREY/BLACK </h3>
<div class="price"> 4.250€ <span> </span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="ro.coat 2.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>HOODED COAT BLACK</h3>
<div class="price"> 4.250€ <span> </span> </div>
</div>
</div>
</div>
</body>
</html>
我尝试了很多不同的事情，但没有任何帮助，所以我需要你。
首先，第 88 行到 90 行的代码有一些错误。
虽然我无法解决您的第一个问题，但我可以回答您有关 z-index 和您的框与导航栏/标题重叠的问题。如果您希望您的“框”位于导航栏/标题下方（与重叠相反），那么您可以使用 Z-index。如果您想要它在下面，那么您必须使用中断或其他 HTML 组件。您还可以使用与位置相关的 CSS 组件。（请注意，Z-Index 并不是使某些内容重叠的唯一方法）