Comment empiler verticalement des éléments superposés absolument positionnés en CSS ?

Résolution des éléments superposés absolument positionnés pour l'empilement vertical

En CSS, la propriété position peut être définie sur différentes valeurs, notamment relatives, absolues et fixes. Lorsqu'un élément est positionné de manière absolue, il est supprimé du flux de documents normal et positionné par rapport à son ancêtre positionné le plus proche ou à la fenêtre d'affichage. Ce comportement peut conduire à l'empilement d'éléments les uns sur les autres, ce qui peut ne pas être l'effet souhaité.

Comprendre le positionnement des éléments

• Statique (par défaut) : Les éléments s'empilent normalement dans le flux de documents.
• Relatif : Les éléments restent dans le flux de documents, mais leur position peut être ajustée en utilisant haut, droite, bas et gauche.
• Absolu : Les éléments sont supprimés du flux de documents et positionnés par rapport à leur ancêtre le plus proche.

Chevauchement d'éléments en position absolue

Dans l'exemple suivant, les éléments avec les classes .row et .col sont en position absolue, ce qui les amène à chevauchement :

body {
  position: relative; /* Contains absolutely positioned elements */
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1, .col2 {
  position: absolute;
}

Pour résoudre ce problème et que les éléments s'empilent verticalement, nous devons préciser leurs hauteurs et nous assurer que leur position verticale est gérée correctement.

Solution sans supprimer les propriétés de position

Bien qu'il ne soit pas idéal de modifier le CSS des éléments, une solution possible sans supprimer les propriétés de position est de spécifier la hauteur de chaque .row et d'ajuster la propriété top du second. .row pour tenir compte de la hauteur du premier .row :

body {
  /* position: relative; remains unchanged */
}

.container {
  /* position: absolute; remains unchanged */
}

.row {
  position: relative;
  height: 2em; /* Specify height for vertical stacking */
}

.col1, .col2 {
  /* position: absolute; remains unchanged */
}

#row2 {
  top: 2em; /* Offset to account for the height of #row1 */
}

Comprendre la solution

• Nous maintenons le positionnement absolu des éléments.
• Nous spécifiez une hauteur pour chaque .row pour permettre l'empilement vertical.
• Nous ajustons la propriété supérieure du deuxième .row (#row2) pour la décaler par la hauteur du premier .row (#row1).

Considérations

• Assurez-vous que les hauteurs des éléments .row sont exactes et incluent tout remplissage ou marge.
• Cette solution peut ne pas convenir au contenu généré dynamiquement avec des hauteurs inconnues.
• Il n'est généralement pas recommandé d'en avoir plusieurs éléments imbriqués en position absolue car cela peut conduire à un comportement complexe.

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!