Question posted in 
I want to give my header a z-Index, but every time I put it on the header gets fully destroyed and idk how I can fix it.
Also my boxes are overlapping my navbar/header, can I fix it with the z-index?
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;
}<div 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>
</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>
2
Answers
to start off with, you have a few errors with your code on Line 88 to 90.
And though I can’t fix your first problem, I can answer your question regarding z-index and your boxes overlapping your nav bar/header. If you want your "boxes" underlapping(the opposite of overlapping) the nav bar/header, then yes you can uze Z-index. If you want it below, then you must use breaks or other HTML components. You can also use CSS components that relate to position.(Please Note That Z-Index Isn’t The Only Way To Make Something Underlap)
The only reason I can think of it not working for you is that you did not have a
;at the end ofbackgroundproperty for theheader