Comment puis-je agrandir une division parentale pour accueillir un enfant parfaitement positionné ?

Extension de la division parent avec enfant à position absolue

Lorsque vous travaillez avec CSS, il est parfois nécessaire de positionner un élément avant un autre sur ordinateur et mobile appareils. Cependant, le positionnement absolu supprime des éléments du flux, les rendant ignorés par d'autres éléments.

Dans ce scénario, considérez le HTML et le CSS suivants :

<div>

parent {
    position: relative;
    width: 100%;
}

child1 {
    width: auto;
    margin-left: 160px;
}

child2 {
    width: 145px;
    position: absolute;
    top: 0px;
    bottom: 0px;
}

Avec cette configuration, child2 est destiné à être positionné avant child1. Cependant, cette configuration échoue car child2 est supprimé du flux, ce qui oblige le div parent à ignorer sa hauteur. Les tentatives de définition de overflow:hidden ou d'utilisation de clearfix sur le parent n'ont aucun effet.

Le problème fondamental est que les éléments positionnés de manière absolue ne sont pas pris en compte dans le calcul de la hauteur de leurs conteneurs parents. Par conséquent, il n'est pas possible de déterminer la taille du parent en fonction d'une position absolue de l'enfant.

Pour résoudre ce problème, deux options sont disponibles :

• Utiliser des hauteurs fixes : Attribuez des hauteurs fixes à l'enfant1 et à l'enfant2, en vous assurant que la hauteur du div parent est suffisante pour s'adapter les deux.
• Impliquez JavaScript : Utilisez JavaScript pour repositionner les deux divs de manière dynamique, en conservant l'ordre visuel souhaité et en vous assurant que la hauteur du div parent s'ajuste en conséquence.

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!