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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini berlaku kerana kedudukan mutlak mempunyai susunan tindanan yang lebih tinggi daripada kedudukan tetap
Cuba penyelesaian ini dalam kod anda:
.navbar { position: fixed; top: 0; background: var(--third-color); display: flex; width: 100%; z-index: 1; /* add this line */}