我的导航栏有问题，我制作了一个固定的导航栏，但是当我滚动到网站底部时，我的一个 div 位于其上方。我希望导航栏位于网站的所有其他内容之上。我不明白为什么，你能帮我吗？这甚至可以纠正吗？
这是我的代码： 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>
和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%;
}
描述图片
发生这种情况是因为绝对位置的堆栈顺序高于固定位置
尝试在您的代码中使用此解决方案：
.navbar { position: fixed; top: 0; background: var(--third-color); display: flex; width: 100%; z-index: 1; /* add this line */}