Pourquoi un élément en position absolue hérite-t-il de son positionnement de son parent en position absolue le plus proche, et non de son ancêtre direct ?

Positionnement absolu imbriqué dans le positionnement absolu

Dans un document Web, les éléments peuvent être positionnés à l'aide de la propriété de position CSS. Lorsqu'il est défini sur relatif, un élément est positionné par rapport à sa position normale, tandis qu'absolu positionne un élément de manière absolue par rapport à son ancêtre positionné le plus proche.

Dans le scénario fourni, il y a trois éléments div :

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

• Le #1er a une position : relative.
• Le #2ème est positionné de manière absolue par rapport au #1er.
• Le #3ème est positionné de manière absolue par rapport au #2ème.

La question se pose : pourquoi le #3ème est-il positionné de manière absolue par rapport au #2ème au lieu de son ancêtre direct #1er ?

La réponse réside dans le comportement de positionnement absolu. Lorsqu'un élément est positionné de manière absolue, il réinitialise la position de ses enfants. Dans ce cas, #2nd est en position absolue par rapport à #1st, donc tous les enfants de #2nd (y compris #3rd) sont en position absolue par rapport à #2nd. Ce comportement est intentionnel et ne peut pas être contourné.

Pour obtenir un positionnement absolu par rapport au div le plus à l'extérieur (#1er), le #3 doit devenir un enfant direct du #1er :

<code class="html"><div id="1st">
  <div id="3rd"></div>
</div></code>

Cet arrangement garantit que le n°3 est positionné de manière absolue par rapport à son ancêtre le plus proche, qui est le n°1.

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!