Header fixed
kush91170
Messages postés
57
Date d'inscription
Statut
Membre
Dernière intervention
-
Kopros Messages postés 595 Date d'inscription Statut Membre Dernière intervention -
Kopros Messages postés 595 Date d'inscription Statut Membre Dernière intervention -
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 ! :)
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 ! :)
A voir également:
- Gpt header corruption has been detected
- Bios has been reset - Forum BIOS
- Warning your chassis has been opened ✓ - Forum Matériel & Système
- Over current have been detected on your usb device - Forum logiciel systeme
- Legi gpt - Télécharger - Intelligence artificielle
- No boot disk has been detected or the disk has failed - Forum Matériel & Système
1 réponse
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 :
Dis moi si ça marche
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
