Comment un Div positionné de manière absolue affecte-t-il la hauteur de son conteneur parent ?

Impact absolu des divisions positionnées sur la hauteur des parents

Lorsque vous travaillez avec CSS, il est crucial de considérer comment le positionnement des éléments affecte les éléments environnants. Un défi courant consiste à garantir qu'un div positionné de manière absolue n'ignore pas les autres éléments de son conteneur parent.

Considérez le code HTML et CSS suivant :

<div>

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

L'objectif est pour positionner child2 avant child1, en particulier sur les appareils mobiles où la navigation doit être en bas. Cependant, child2 a une hauteur dynamique, ce qui signifie que définir une hauteur fixe pour le div parent n'est pas une option.

Malheureusement, puisque les éléments en position absolue sont supprimés du flux, ils sont ignorés par les autres éléments du parent. récipient. Définir overflow:hidden sur le div parent ou utiliser Clearfix n'aidera pas.

La solution

Comme le reconnaît l'énoncé du problème, la solution réside dans la compréhension qu'absolument les éléments positionnés sont retirés du flux. Par conséquent, il n'est pas possible de définir la taille du parent en fonction d'un élément positionné de manière absolue.

Options à considérer :

• Hauteurs fixes : Attribuez des hauteurs fixes aux deux éléments enfants pour garantir une mise en page.
• JavaScript : Impliquez JavaScript pour ajuster dynamiquement les positions des divs en fonction de la taille de l'enfant2.
• Disposition flexible ou grille CSS : Ces Les techniques CSS plus récentes vous permettent d'inverser l'ordre visuel des éléments HTML dans un conteneur parent sans utiliser le positionnement absolu.

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!