Comment puis-je définir la hauteur d'un conteneur parent avec des enfants absolument positionnés ?

Hauteur des parents et positionnement absolu

Comme nous travaillons avec des conteneurs et leurs enfants positionnés de manière absolue ou relative, nous pouvons rencontrer des difficultés pour déterminer la hauteur du conteneur tout en garantissant que le les enfants y restent.

Problème

Considérez le HTML et le CSS suivants code:

<section></section>

article {
  position: relative;
}

.one {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: absolute;
  top: 10px;
  right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

L'objectif est de faire en sorte que le texte "barre" apparaisse entre les quatre carrés, et non derrière eux. Cependant, en raison du positionnement absolu des carrés, la hauteur du conteneur ne peut pas être définie en fonction des dimensions de ses enfants.

Solutions

Mise à jour 2022 :

Les technologies de mise en page CSS modernes comme Flex ou Grid offrent des solutions plus élégantes. Il est recommandé d'explorer ces options pour un meilleur support et une meilleure flexibilité.

Réponse originale :

Avec du CSS pur, il n'est pas possible de définir la taille du parent tout en conservant une valeur absolue positionnement pour ses enfants.

Alternative Approches :

• JavaScript : Calculez la hauteur des enfants en position absolue après le rendu et utilisez-la pour définir la hauteur du parent.
• Flottant et marges : Positionnez les enfants à l'aide du flotteur et des marges tout en les gardant dans le flux du document. Utilisez overflow : caché (ou une technique clearfix) sur le parent pour augmenter sa hauteur en fonction des dimensions de ses enfants.

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!