Pourquoi mes éléments positionnés de manière absolue/fixe sont-ils mal placés ?

Le mystère des éléments absolus/fixes égarés : comprendre la position et le contexte

Dans votre mise en page CSS, comprendre le comportement des éléments absolus ou fixes éléments positionnés est crucial. Cependant, vous avez rencontré des problèmes à cet égard, et nous sommes ici pour faire la lumière sur les raisons qui les sous-tendent. Entrons dans les détails :

Cas 1 : Boîte grise à l'extérieur du parent relatif

Vous vous attendiez à ce que la boîte grise soit positionnée dans le coin supérieur gauche du conteneur. , mais il a fini par être positionné à l'extérieur. La raison réside dans les propriétés que vous avez appliquées :

• La case grise a la position : absolue. Cela rend sa position indépendante de son élément parent.
• Cependant, son élément parent, le conteneur, a position: relative. Cela crée un nouveau contexte de positionnement pour la boîte grise.
• Dans ce contexte de positionnement, les valeurs haut : 0 et gauche : 0 de la boîte grise sont relatives au coin supérieur gauche de son parent dans sa position actuelle.
• Mais rappelez-vous, le conteneur a une marge supérieure de 100px, comme spécifié par la propriété top: 100px de la boîte orange. Cela crée un espace entre le coin supérieur gauche du parent et sa position visuelle réelle, ce qui entraîne le positionnement de la boîte grise en dehors de la zone visible.

Cas 2 : la boîte grise est déplacée par la boîte orange.

Dans le deuxième cas, lorsque vous avez déplacé la boîte grise pour qu'elle soit le deuxième enfant dans le conteneur, elle a semblé se déplacer vers la droite, en suivant la boîte orange. Cela est dû aux éléments suivants :

• La position de la boîte orange : relative établit un nouveau contexte de positionnement.
• Dans ce contexte, les valeurs en haut : 0 et à gauche : 0 de la boîte grise sont par rapport au coin supérieur gauche de la boîte orange.
• La propriété gauche de la boîte orange : 100px pousse la boîte orange vers la droite, et par conséquent, la case grise suit ce déplacement, apparaissant décalée vers la droite.

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!