Absolute div is one layer above fixed navbar

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%;
}

Image for description

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 */

}