Comment gérer l'effondrement des conteneurs lors de l'utilisation de « display : inline-block » et « position : absolue » ?

Positionnement d'éléments avec affichage et positionnement mixtes

La combinaison de display:inline-block et position:absolute en CSS peut conduire à un comportement inattendu . Lorsqu'un élément est positionné de manière absolue, il se comporte comme s'il était retiré du flux normal de contenu et l'élément qui le contient ignore sa hauteur.

Positionnement en ligne ou absolu

display:inline-block permet aux éléments de circuler horizontalement à côté d'autres éléments, tandis que position:absolute supprime les éléments du flux et les positionne en fonction des propriétés haut, bas, gauche et droite.

Problème de positionnement absolu

Dans le code fourni, l'élément position:absolute (.element-right-b) le supprime du flux et le prend en compte pour le calcul de la hauteur totale de le conteneur .section. En conséquence, le conteneur n'a pas de hauteur inhérente et s'effondre à zéro.

Solutions

1. Définir la hauteur du conteneur : Si position :absolute est essentiel, réglez manuellement la hauteur du conteneur .section pour éviter qu'il ne s'effondre.
2. Option de position alternative : Si le positionnement absolu n'est pas strictement nécessaire, envisagez d'utiliser float ou sticky à la place . Les deux permettent aux éléments de se positionner par rapport à d'autres éléments sans affecter la mise en page.
3. Bloc en ligne avec remplissage : Pour plusieurs colonnes imbriquées avec des positions fixes, définissez l'affichage de tous les éléments imbriqués pour afficher :inline-block et appliquez un remplissage à gauche aux colonnes suivantes pour créer l'effet d'indentation souhaité.

Exemple spécifique pour les colonnes imbriquées

Pour obtenir des colonnes imbriquées avec des valeurs fixes positions, modifiez le CSS comme suit :

<code class="css">.section span {
  display: inline-block;
}
.element-left {
  width: 200px;
}
.element-right {
  width: 100px;
}
.indent-1 {
  padding-left: 10px;
}
.indent-2 {
  padding-left: 20px;
}</code>

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!