J'ai un problème avec ma barre de navigation, j'ai créé une barre de navigation fixe mais lorsque je fais défiler vers le bas du site, un de mes divs est au-dessus. Je souhaite que la barre de navigation soit au-dessus de tous les autres contenus du site. Je ne comprends pas pourquoi, pouvez-vous m'aider ? Est-ce que cela peut même être corrigé ?
Voici mon 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>
et 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%;
}
Décrivez l'image
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cela se produit parce que les positions absolues ont un ordre de pile plus élevé que les positions fixes
Essayez cette solution dans votre code :
.navbar { position: fixed; top: 0; background: var(--third-color); display: flex; width: 100%; z-index: 1; /* add this line */}