I have a problem with my navbar, i made a fixed navbar but when i scroll to the bottom of the site one of my div is above it. I want naviguation bar to be above all others contents of the site. The I can’t figure out why, can you help me? Is this even possible to correct?
Here my code:
HTML
<body>
<header>
<div class="navbar">
<div class="navbar-gauche">
<a href="easter-egg">Hidden</a>
</div>
<div class="navbar-centre">
<a href="index.html">Accueil</a>
<a href="competences.html">Compétences</a>
<a href="projets.html">Projets</a>
</div>
<div class="navbar-droite">
<a class="droite" href="contact.html"><img src="images/paper-plane-icon.svg" id="dessus"/> Contact</a>
</div>
</div>
</header>
<main>
<div class="accueil-1">
<h1>Qui suis je?</h1>
</div>
<div class="accueil-2"><div><div><div>
<div class="mosaique"></div>
</div></div>
</div>
</main>
</body>
And CSS:
/*
Données générales
*/
:root{
--primary-color: #ffffff;
--second-color: #C4D7ED;
--third-color: #ABC8E2;
--fourth-color: #375D81;
--fith-color: #183152;
}
*{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html{
height: -webkit-fill-available;
}
body{
margin: 0%;
height: 100%;
}
main{
height: 100%;
}
/*
Barre de naviguation
*/
.navbar{
position: fixed;
top:0;
background: var(--third-color);
display: flex;
width: 100%;
}
.navbar a{
float: left;
color: var(--primary-color);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 2vw;
}
.navbar-gauche a{
color: var(--second-color);
font-family: Courgette;
}
.navbar-centre{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar-centre a:hover{
background-color: var(--second-color);
color: var(--fith-color);
}
.navbar-droite{
background-color: var(--fith-color);
color: var(--fourth-color);
margin-left: auto;
margin-right: 0%;
}
.navbar-droite a:hover{
color: var(--first-color);
}
.droite{
display: flex;
}
.navbar-droite img{
height: 2.5vw;
width: 2.5vw;
}
#dessus{
fill: green;
}
/*
Page principale
*/
.main{
height: 100%;
width: 100%;
}
.accueil-1 {
background-image: url("images/accueil-1.webp");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
h1{
font-family: Courgette;
color: var(--fourth-color);
line-height: 700px;
text-align: center;
font-size: 6vw;
}
.accueil-2{
background-color: var(--second-color);
height: 100%;
width: 100%;
}
.mosaique{
background-color: var(--primary-color);
height: 100%;
width: 70%;
position: absolute;
right: 15%;
left: 15%;
margin-top: -20%;
}
>Solution :
it is happening because position absolute has higher stack order than position fixed
try using this solution for your code:
.navbar {
position: fixed;
top: 0;
background: var(--third-color);
display: flex;
width: 100%;
z-index: 1; /* add this line */
}