Pourquoi un en-tête fixe se déplace-t-il avec un frère ou une sœur non positionné ?

Comprendre le comportement des éléments fixes : pourquoi un en-tête fixe se déplace avec un frère non positionné

Le positionnement fixe en CSS place un élément dans un élément fixe position par rapport à la fenêtre. Cependant, il est important de comprendre que la fenêtre d'affichage est calculée en fonction des éléments du flux normal du document.

Dans le HTML fourni, l'élément d'en-tête est fixe tandis que l'élément principal a une marge supérieure appliquée. Lorsque ces éléments sont placés dans le document, ce qui suit se produit :

1. En-tête fixe : L'élément d'en-tête, de position : fixe, est supprimé du flux documentaire et placé au en haut de la fenêtre.
2. Calcul du flux de documents : Les éléments restants, en commençant par l'élément principal, établissent le flux de documents. La marge supérieure : 90 px appliquée à l'élément principal signifie l'espacement vertical entre l'en-tête et le contenu principal.
3. Calcul de la fenêtre d'affichage : La fenêtre d'affichage est calculée en fonction des éléments du flux de documents. . Puisque le premier élément entrant est l'élément principal avec une marge supérieure de 90 px, la fenêtre d'affichage commence à ce stade.
4. Réduction de la marge : L'élément body, le parent de main, a une marge par défaut de 8px. En raison de l'effondrement de la marge CSS, la marge supérieure de main (90 px) s'effondre avec la marge supérieure du corps (8 px), ce qui donne une marge combinée de 98 px.

En conséquence, les deux l'élément principal et l'en-tête sont décalés de 98 pixels, même si l'en-tête est fixé à la fenêtre. En effet, la fenêtre elle-même est ajustée en fonction des marges réduites dans le flux de documents.

Par conséquent, il est crucial de considérer que même si les éléments fixes sont positionnés par rapport à la fenêtre, la position de la fenêtre est déterminée par les éléments à l'intérieur. le flux régulier de documents. Cette compréhension explique pourquoi un en-tête fixe peut se déplacer avec un élément frère non positionné.

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!