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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
发生这种情况是因为绝对位置的堆栈顺序高于固定位置
尝试在您的代码中使用此解决方案：
.navbar { position: fixed; top: 0; background: var(--third-color); display: flex; width: 100%; z-index: 1; /* add this line */}