Header fixed

Fermé
kush91170 Messages postés 57 Date d'inscription mercredi 8 janvier 2014 Statut Membre Dernière intervention 22 juillet 2015 - 13 janv. 2015 à 14:14
Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 - 13 janv. 2015 à 14:51
Bonjour à tous,

Je vous explique mon problème. Je créer un portfolio très simple en HTML et CSS. Le plan du site est très simple, il est composé d'un header qui fait toute la largeur du site et d'une section en dessous. Mon objectif est de pouvoir scroller en bas tout en ayant le header visible. J'ai donc mis le header en "fixed". Le seul problème est que lorsque je scroll, la section va traverser mon header comme s'il était transparent. Auriez-vous une solution à ce problème ? Je ne sais pas si j'ai bien expliquer mais j'attends vos questions si vous voulez plus de détails. Merci d'avance ! :)

1 réponse

Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
13 janv. 2015 à 14:51
Si j'ai bien compris, la section passe par dessus le header quand on scroll.
Si c'est bien ça, il suffit de positionner la section, et de mettre un z-index plus élevé sur le header que sur la section.
En gros ça ressemble à peu près à ça :
<div id="header">
...
</div>
<div id="section">
...
</div>
CSS :
#header{
     position: fixed;
     z-index: 2;
}
#section{
     position: relative;
     z-index: 1;
}


Dis moi si ça marche
0