Pourquoi mes éléments positionnés de manière absolue s'empilent-ils verticalement plutôt qu'horizontalement ?

Éléments absolus s'empilant verticalement au lieu d'horizontalement

En CSS, le positionnement d'éléments avec un positionnement absolu peut conduire à des comportements d'empilement inattendus. Pour comprendre pourquoi les éléments absolus s'empilent les uns sur les autres au lieu de côte à côte, examinons les principes fondamentaux du positionnement CSS.

Positionnement relatif ou absolu

Lorsqu'un élément est positionné avec position: relative, il conserve sa position dans le flux de documents normal, mais peut être déplacé à l'aide des propriétés top, right, bottom ou left. Les éléments avec un positionnement relatif n'affectent pas la disposition des éléments environnants.

En revanche, un élément avec position : absolue est supprimé du flux de documents et devient positionné par rapport à son élément conteneur ou à l'ancêtre positionné le plus proche. Les éléments absolus occupent leur propre espace et n'interagissent plus avec les autres éléments du flux.

Dans votre exemple

Dans votre code, #row1 et #row2 ont des valeurs absolues. positionnement, les rendant indépendants du flux documentaire. Comme ces éléments sont tous deux enfants du .container positionné de manière absolue, ils sont positionnés par rapport à lui. Puisque #row1 est positionné avant #row2, il apparaît au-dessus.

Résoudre le problème

Pour afficher #row1 et #row2 verticalement, vous devez supprimer le positionnement absolu de ces éléments et appliquez-le à leur élément conteneur, .container. Cela permet aux lignes de se comporter comme des éléments de bloc normaux, empilés verticalement les uns en dessous des autres.

.container {
  position: absolute;
}

.row {
  position: static;
}

Comprendre les positions CSS

Pour clarifier davantage, explorons les différentes Valeurs de position CSS :

• statique : Les éléments restent dans le document normal flow.
• relatif : Les éléments conservent leur position dans le flux mais peuvent être déplacés à l'aide des propriétés top, right, bottom ou left.
• absolu : Les éléments sont supprimés du flux et positionnés par rapport à l'élément qui les contient ou le plus proche ancêtre.
• fixé : Les éléments sont supprimés du flux et positionnés par rapport à la fenêtre.

En comprenant comment fonctionne le positionnement CSS, vous pouvez contrôler efficacement le disposition et empilement des éléments sur vos 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!