Pourquoi mon élément positionné de manière absolue apparaît-il au mauvais endroit ?

Éléments positionnés mal placés : comprendre le positionnement absolu et fixe

Le positionnement absolu et fixe en CSS permet aux éléments d'être placés avec précision dans un document ou une fenêtre . Cependant, il arrive parfois que des éléments n’apparaissent pas là où vous l’attendez. Cela est souvent dû à une mauvaise compréhension du fonctionnement de ces méthodes de positionnement.

Le problème du positionnement statique

Lorsqu'un élément est positionné statiquement (valeur par défaut), il coule avec le reste du document, en prenant sa position par rapport aux éléments environnants. Dans l’exemple donné, le div de la boîte grise est positionné de manière absolue. Cependant, le conteneur a une position relative et non une position absolue ou fixe. Cela signifie que la boîte grise est toujours soumise au flux du document et sera positionnée par rapport à la position statique du conteneur.

Positionnement absolu et fixe

Absolu positionnement supprime un élément du flux du document et le positionne par rapport à son ancêtre positionné le plus proche. S'il n'y a pas d'ancêtre positionné, il sera positionné par rapport au document lui-même. Le positionnement fixe est similaire au positionnement absolu, mais il positionne un élément par rapport à la fenêtre plutôt que par rapport à son ancêtre.

Dans le premier exemple, la boîte grise est positionnée de manière absolue, mais son conteneur est positionné de manière statique. Comme indiqué précédemment, cela signifie que la boîte grise sera positionnée par rapport à la position statique du conteneur, qui n'est pas dans le coin supérieur gauche.

Dans le deuxième exemple, la boîte grise est déplacée avant le boîte orange. Cela amène la boîte orange à occuper l'espace que la boîte grise aurait occupé. Par conséquent, la boîte grise apparaît après la boîte orange.

Corriger le problème

Pour positionner correctement la boîte grise, le conteneur doit être positionné de manière absolue ou fixe . Cela permettra à la boîte grise d'être positionnée par rapport à la position absolue ou fixe du conteneur plutôt que sa position statique.

Voici le code corrigé :

.container {
  background: lightblue;
  position: absolute;
}

Maintenant, la boîte grise- La boîte devrait apparaître dans le coin supérieur gauche du conteneur 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!