Positionnement absolu dans le positionnement absolu

Lorsque vous travaillez avec des mises en page Web, il est courant d'utiliser des techniques de positionnement telles que le positionnement absolu pour organiser les éléments avec précision dans une page. Cependant, un problème potentiel survient lorsque vous tentez d'appliquer un positionnement absolu au sein d'un élément lui-même positionné de manière absolue.

Supposons que vous disposiez d'un élément conteneur (1er div) avec un positionnement relatif (position:relative), qui vous permet pour positionner les éléments enfants par rapport à sa propre position. Dans ce conteneur, vous avez un élément en position absolue (2e div) et un troisième élément en position absolue (3e div) imbriqués dans la 2e div.

Dans ce scénario, vous pouvez vous attendre à ce que le 3e div soit positionné de manière absolue. par rapport au 1er div, même si le 2ème div est également en position absolue. Cependant, ce n'est pas le cas.

Comprendre la hiérarchie de positionnement

La raison de ce comportement réside dans le fonctionnement du positionnement absolu. Lorsqu'un élément reçoit un positionnement absolu, il est supprimé du flux normal du document et positionné par rapport à son ancêtre positionné le plus proche. Dans ce cas, le 2ème div est l'ancêtre positionné le plus proche du 3ème div, que le 1er div ait également un positionnement relatif ou non.

Cela signifie que la position absolue du 3ème div est calculée par rapport au 2ème div. la position de la div, pas la position de la 1ère div. En conséquence, la 3ème div apparaîtra absolument positionnée dans la 2ème div, pas dans la 1ère div.

Technique de positionnement alternative

Si vous souhaitez que la 3ème div soit positionné de manière absolue par rapport à la 1ère div, vous devez en faire un enfant direct de la 1ère div. Cela permettra au 3ème div d'hériter de la position absolue du 1er div et d'être positionné en conséquence.

Il est important de noter que position: Absolute réinitialise la position relative des enfants tout comme position: relative le fait. Par conséquent, si vous avez plusieurs éléments enfants en position absolue au sein d'un élément parent en position relative, leurs positions seront calculées indépendamment, par rapport à leur ancêtre en position absolue le plus proche.