Pourquoi mes éléments à position absolue/fixe s'affichent-ils hors emplacement ?

Éléments absolus/à position fixe hors emplacement

Dans le positionnement CSS, absolu et fixe peuvent prêter à confusion, entraînant des désalignements. Ici, nous expliquons pourquoi de tels éléments peuvent ne pas s'afficher comme prévu.

Cas 1 : Boîte grise absolue en dehors du parent relatif

Lorsqu'un élément est positionné de manière absolue, sa position est pris par rapport à son ancêtre le plus proche avec une position non statique. Dans ce cas, le parent .container a la position : relative. Cependant, la boîte grise absolue est en dehors de son conteneur car son haut est défini sur auto (valeur par défaut).

Conformément à la spécification CSS, lorsque haut et bas sont automatiques et que la hauteur n'est pas automatique, le haut est défini à la position statique. Cette position est déterminée par la position de l'élément s'il n'était pas positionné de manière absolue.

Dans ce cas, la position statique de la boîte grise est à l'extérieur du conteneur car il n'y a pas de marge ni de remplissage devant elle. Par conséquent, la boîte grise est positionnée dans le coin supérieur gauche du corps du document, et non dans le conteneur.

Cas 2 : la boîte grise ne se trouve pas dans le coin supérieur gauche après la boîte orange

Lorsque la case grise est déplacée vers la deuxième position, elle se positionne après l'espace laissé par la case orange. En effet, la boîte orange a position: relative, ce qui crée un nouveau contexte d'empilement.

Les éléments à l'intérieur d'un contexte d'empilement sont positionnés par rapport à l'ancêtre positionné le plus proche dans ce contexte. La boîte grise est positionnée après la boîte orange car elle constitue l'élément positionné suivant dans le contexte d'empilement du conteneur.

Conclusion

Comprendre les règles régissant le positionnement absolu et fixe est crucial pour le placement précis des éléments. En prenant en compte les positions statiques, les contextes d'empilement et les relations entre les éléments positionnés et non positionnés, les développeurs peuvent garantir que leurs éléments sont positionnés comme prévu.

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!