Pourquoi mon en-tête fixe fait-il descendre mon contenu et comment puis-je y remédier ?

L'en-tête fixe pousse le contenu vers le bas

Dans mon en-tête je mets le titre de la page et ma barre de navigation, mais dès que je le règle position : fixe ; la marge en haut a augmenté. Voici le lien vers Codepen :

Vous êtes confronté à un problème de effondrement de la marge. Après avoir corrigé l'en-tête, vous l'avez supprimé du flux et votre formulaire devient le premier élément entrant, ainsi sa marge supérieure s'effondrera avec la marge supérieure du corps¹. Cela signifie que le corps aura une grande marge supérieure et que votre élément fixe sera positionné en tenant compte du corps puisque vous n'avez défini aucune valeur supérieure².

Pour éviter cela, vous avez simplement besoin pour désactiver la réduction des marges (ce que je recommande afin d'éviter d'autres problèmes) ou définir la valeur supérieure pour déplacer l'élément là où vous veux.

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

#header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
    top:0px; /*Add a top value to place it*/
}

¹ [cette marge n'apparaît pas car le corps n'a pas de marge définie, c'est l'espace entre l'élément et le corps ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [En savoir plus sur la façon dont cela fonctionne dans cet article.](https://css-tricks.com/couple-margin-collapsing-gotchas/)

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!