Pourquoi un élément positionné de manière absolue au sein d'un élément positionné de manière relative hérite-t-il de sa position de son parent immédiat ?

Positionnement absolu dans le positionnement relatif : pourquoi la hiérarchie est importante

En HTML, le positionnement des éléments est déterminé par la propriété de positionnement CSS. Lorsqu'un élément se voit attribuer un positionnement absolu, il est supprimé de son flux normal dans le document et sa position est définie par rapport à son ancêtre le plus proche avec position : absolue ou position : relative.

Question :

Considérez la structure HTML suivante :

<div id="1st">
  <div id="2nd">
    <div id="3rd"></div>
  </div>
</div>

Si le premier div a une position : relative, le deuxième div a une position : absolue, et le troisième div a également une position : absolue , pourquoi le troisième div est-il positionné de manière absolue par rapport au deuxième div et non au premier div ?

Réponse :

La clé pour comprendre ce comportement réside dans la manière absolue le positionnement affecte la position des éléments enfants.

Lorsqu'un élément est positionné de manière absolue, tous les éléments enfants qu'il contient sont également positionnés de manière absolue par rapport à lui, même si ces éléments enfants ont leur propre positionnement absolu. En effet, le positionnement absolu réinitialise efficacement le positionnement relatif par défaut des éléments enfants.

Dans notre exemple, le troisième div est positionné de manière absolue par rapport au deuxième div car le deuxième div a la position : absolue. Le positionnement absolu du premier div (avec position : relative) n'a aucun effet sur le positionnement du troisième div car ce n'est pas un ancêtre direct du troisième div.

Pour obtenir le comportement souhaité d'avoir le troisième div div positionné de manière absolue par rapport au premier div, nous aurions besoin de supprimer le positionnement absolu du deuxième div et de faire du troisième div un enfant direct du premier div :

<div id="1st">
  <div id="3rd"></div>
</div>

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!