Div absolu un niveau au-dessus de la barre de navigation fixe

J'ai un problème avec ma barre de navigation, j'ai créé une barre de navigation fixe mais lorsque je fais défiler vers le bas du site, un de mes divs est au-dessus. Je souhaite que la barre de navigation soit au-dessus de tous les autres contenus du site. Je ne comprends pas pourquoi, pouvez-vous m'aider ? Est-ce que cela peut même être corrigé ?

Voici mon 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>

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

Décrivez l'image

P粉635509719268 Il y a quelques jours374

Div absolu un niveau au-dessus de la barre de navigation fixe

répondre à tous(1)je répondrai