Pourquoi mon en-tête fixe se déroule-t-il de manière inattendue ?

Votre en-tête descend de manière inattendue lors de l'utilisation de la position : fixe ?

Après avoir corrigé votre en-tête, il est soudainement déplacé vers le bas, laissant un grand espace vide à l'endroit où votre marge supérieure est utilisée. être. Voici comment résoudre ce problème, mais d'abord, comprenons le problème.

Réduction des marges et contexte de formatage des blocs

Lorsque vous définissez position:fixed sur un élément, il est supprimé du flux de le document et n'est plus soumis aux règles du contexte de formatage en bloc (BFC). Cela signifie que les marges ou les remplissages sur l'en-tête ne contribueront pas à la hauteur de l'élément et que toutes les marges sur l'élément suivant s'effondreront avec la marge supérieure du corps.

Comment y remédier

Il existe deux façons de résoudre ce problème :

Désactiver la réduction des marges

Pour désactiver la réduction des marges, vous pouvez ajoutez padding-top: 1px au élément. Cela créera un petit espace de 1 px en haut de la page, ce qui empêchera les marges de s'effondrer.

Définissez une valeur supérieure pour l'en-tête

Une autre façon de résoudre ce problème consiste à définir une valeur supérieure pour votre en-tête. Cela déplacera l'en-tête vers le bas du montant spécifié, ce qui laissera de la place aux marges de l'élément suivant.

Pour résumer

Si vous remarquez que votre en-tête descend de manière inattendue lorsque vous utilisez position : corrigé, cela est probablement dû à l'effondrement de la marge. Pour résoudre ce problème, vous avez deux options : désactiver la réduction des marges en ajoutant une petite marge à votre corps ou définir une valeur supérieure pour l'élément d'en-tête.

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!