Site yapmaya çalışıyorum. Üstte Position: fixed; olan bir menü olacak. Fakat menünün arka planı olarak kullandığım Box menüdeki butonların üstünde kalıyor. Bunu nasıl önlerim?
HTML kısmı:
<nav>
<div id="container-nav">
<a class="home-btn nav-btn" href="home.html"><i class="fa-solid fa-house"></i> Home</a>
<a class="share-btn nav-btn" href="share.html"><i class="fa-solid fa-share"></i> Share</a>
</div>
<div class="box"></div>
</nav>
CSS kısmı:
#container-nav {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
text-align: center;
}
.nav-btn {
text-decoration: none;
display: inline-block;
color: white;
padding: 15px 30px;
background-color: black;
}
.home-btn:hover {
opacity: 0.8;
}
.share-btn:hover {
opacity: 0.8;
}
.box {
background-color: black;
width: 100%;
height: 53px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
position:fixed;
}
Görüntü olarak böyle oluyor.