Pourquoi le positionnement absolu hérite-t-il du parent immédiat dans les divisions imbriquées ?

Anomalie de positionnement absolue absolue

Dans une disposition multicouche impliquant un positionnement absolu, il est courant de rencontrer un scénario dans lequel un div interne a un positionnement absolu. positionnement par rapport à son parent immédiat, qui est également positionné de manière absolue dans un autre div. Cependant, dans une telle configuration, le div interne hérite de sa position absolue de son parent immédiat, ce qui conduit à un comportement apparemment inattendu.

Considérez la structure HTML suivante :

<code class="html"><div id="1st" style="position: relative;">
  <div id="2nd" style="position: absolute;">
    <div id="3rd" style="position: absolute;"></div>
  </div>
</div></code>

Intuitivement, un on s'attendrait à ce que la position du n°3 soit absolue par rapport au n°1, car le n°2 est positionné de manière absolue dans le n°1. Cependant, la réalité est que le positionnement absolu du n°3 est hérité du n°2. En effet, position: Absolute on #2nd réinitialise sa position par rapport à son parent, ce qui fait que #3rd est positionné de manière absolue dans #2nd.

Ce comportement peut être attribué aux règles de spécificité CSS. Lorsqu'un élément enfant a une position absolue, sa position est déterminée par le cadre de délimitation de son parent immédiat. Dans ce cas, la position du #3ème est définie par le cadre de délimitation du #2ème, et il ignore la position absolue du #2ème par rapport au #1er.

Pour résoudre ce problème et avoir le #3ème positionné de manière absolue par rapport au #1er, il faut faire du #3ème un enfant direct du #1er. En d'autres termes, le HTML suivant entraînerait le comportement souhaité :

<code class="html"><div id="1st" style="position: relative;">
  <div id="3rd" style="position: absolute;"></div>
</div></code>

Dans ce cas, la position absolue de #3rd est déterminée par la position de son parent, #1st, ce à quoi on pourrait s'attendre. Il est important de noter que la réinitialisation de la position d'un élément parent via position: Absolute affecte également le positionnement de ses enfants, à moins qu'ils ne soient positionnés de manière absolue par rapport à un élément parent différent.

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!