Absolute Div. eine Ebene über der festen Navigationsleiste
P粉635509719
P粉635509719 2024-02-21 22:06:56
0
1
394

Ich habe ein Problem mit meiner Navigationsleiste. Ich habe eine feste Navigationsleiste erstellt, aber wenn ich zum Ende der Website scrolle, befindet sich darüber eines meiner Divs. Ich möchte, dass die Navigationsleiste über allen anderen Inhalten der Website angezeigt wird. Ich verstehe nicht warum, können Sie mir helfen? Lässt sich das überhaupt korrigieren?

Das ist mein 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>

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

Beschreiben Sie das Bild

P粉635509719
P粉635509719

Antworte allen(1)
P粉960525583

发生这种情况是因为绝对位置的堆栈顺序高于固定位置

尝试在您的代码中使用此解决方案:

.navbar {
position: fixed;
top: 0;
background: var(--third-color);
display: flex;
width: 100%;
z-index: 1; /* add this line */

}

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage