Pourquoi mon en-tête fixe descend-il et comment puis-je le réparer ?

L'en-tête descend lorsque je le fixe

Ici, vous rencontrez un problème connu sous le nom de effondrement de la marge. Lorsque vous avez défini la position de l'en-tête : fixe, elle a été supprimée du flux normal du document, ce qui a fait que la marge supérieure de l'élément suivant (dans ce cas, le formulaire) s'est réduite avec la marge supérieure du corps. C'est le comportement par défaut du HTML.

Pour éviter ce problème et préserver l'espacement vertical entre l'en-tête et le formulaire, vous avez deux options :

1. Désactiver Effondrement des marges :

   Ajouter un padding-top : 1px ; au corps de votre CSS pour éviter l'effondrement des marges. Cette petite quantité de rembourrage interrompt efficacement l'effondrement et permet à la marge du formulaire de prendre effet.

2. Définir la marge supérieure :

   Ajouter le haut : [valeur souhaitée] ; au CSS pour que votre en-tête définisse explicitement sa position verticale par rapport au haut de la fenêtre. Cela remplacera la marge réduite et garantira que votre en-tête reste dans la position souhaitée.

Code mis à jour (option 1) :

body {
  padding-top: 1px; /* disable margin collapsing */
}

Code mis à jour (option 2):

#header {
  top: 3rem; /* desired vertical position */
}

Remarque :

Si vous utilisez un framework comme Bootstrap ou Materialise CSS, ils ont peut-être déjà des règles en place pour gérer marge effondrée. Dans ce cas, vous devrez peut-être ignorer ces règles ou utiliser des approches alternatives pour obtenir le positionnement souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!