Pourquoi mon Div absolument positionné ne reste-t-il pas dans son conteneur parent ?

Problème de position absolue résolu

Dans une tentative de positionner absolument un div dans son conteneur parent, il a été constaté que le div restait coincé dans le coin supérieur gauche de la page. Le code utilisé pour ce positionnement est le suivant :

<div>

L'attente était que le div avec l'identifiant "absPos" soit positionné dans le div parent, cependant, le comportement réel était qu'il soit placé à en haut à gauche de la page.

Cause et Solution

La raison de ce comportement réside dans le concept de parent décalé. Les éléments avec un positionnement absolu dérivent leur position par rapport à leur parent décalé, qui est l'ancêtre le plus proche également positionné. Dans le code fourni, aucun des ancêtres du div "absPos" n'était positionné comme élément, ce qui entraînait son décalage par rapport à l'élément body.

Pour résoudre ce problème, il est nécessaire de définir la position du parent. div à "relatif", en utilisant le code suivant :

<div>

En appliquant la position "relative" au div parent, il devient un élément positionné et sert ainsi de parent de décalage pour la division "absPos". Cela résout le problème et permet le positionnement absolu du div "absPos" par rapport à son parent.

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!