Div mutlak satu tahap di atas bar navigasi tetap

Saya mempunyai masalah dengan navbar saya, saya membuat navbar tetap tetapi apabila saya menatal ke bahagian bawah tapak salah satu div saya berada di atasnya. Saya mahu bar navigasi berada di atas semua kandungan lain di tapak. Saya tidak faham mengapa, bolehkah anda membantu saya? Adakah ini boleh diperbetulkan?

Ini kod saya: 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>

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

Huraikan gambar

P粉635509719345 hari yang lalu453

Div mutlak satu tahap di atas bar navigasi tetap

membalas semua(1)saya akan balas