Pourquoi un en-tête fixe se déplace-t-il lorsque ses frères et sœurs le font ?

Motilité d'en-tête fixe : résoudre l'énigme

Question :

Malgré son immobilité supposée, pourquoi un élément avec position : décalage fixe aux côtés de frères et sœurs non positionnés ?

Réponse :

Bien que les éléments fixes apparaissent ancrés à la fenêtre du navigateur, leur positionnement est calculé par rapport à la fenêtre d'affichage, ce qui englobe les éléments du flux de documents. Étant donné que le premier élément du flux de documents est le div sans en-tête dans ce cas, la fenêtre d'affichage est déterminée après l'application de l'attribut margin-top.

Par conséquent, lorsque margin-top: 90px est appliqué au non- header div :

1. La marge par défaut de l'élément body (8px) s'effondre avec la marge supérieure de l'élément principal (90px).
2. Les deux éléments se décalent de 90px vers le bas, y compris l'élément d'en-tête avec position : fixe.
3. C'est parce que la fenêtre d'affichage est calculée à partir du haut de l'élément de corps, et non de l'élément fixe.

Conclusion :

Les éléments fixes, bien qu'ils soient supprimés du flux de documents, sont toujours affectés par le positionnement des éléments dans ce flux. Comprendre cette relation est crucial pour une mise en page et un positionnement précis sur les pages Web.

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!