Définir la position absolue d'un enfant par rapport à son parent signifie définir la position de l'élément enfant de telle manière que les propriétés de position qui s'y appliquent fonctionnent conformément à la zone et à la position de l'élément parent et non à l'interface entière, ceci se fait en ajoutant la propriété de position avec la valeur absolue pour l'élément enfant ou div.

Définition de la position absolue par rapport à Parent Div

La position peut être définie en fonction du parent div en ajoutant des propriétés de position dans l'élément de style CSS.

Discutons de cela avec l'aide d'un exemple simple où il y a un div de div et deux divs enfants qui y sont associés:

Parent

Je suis le premier enfant!!!

Je suis le deuxième enfant…

Dans l'extrait de code ci-dessus, il y a un div parent, et il a deux divs enfants:

• Il y a la balise div qui a l'identifiant déclaré «parent,»Et à l'intérieur de la div, il y a un

  se diriger comme le contenu à afficher à l'intérieur de la zone Div.

• Ensuite, il y a l'enfant div à l'intérieur du parent div qui a le ID déclaré «enfant1".
• De même, il y a un autre étiquette div enfant qui déclare l'ID de la div comme «enfant2".

Cela affichera les résultats suivants:

Pour définir la position absolue du «enfant1" et "enfant2”Pertinente pour le parent div, il est juste nécessaire d'ajouter les propriétés absolues de position CSS pour les divs enfants et la propriété relative de position pour le parent div:

#parent
Position: relative;

# child1
Position: absolue;

# child2
Position: absolue;

La rubrique créée dans le parent div ne bougera pas, mais celles des enfants divs changent leur position par rapport à la position du div parental. Cela affichera l'interface suivante dans la sortie:

C'est ainsi que nous pouvons définir la position absolue par rapport au parent div.

Conclusion

La position absolue des divs de l'enfant dans un document HTML peut être défini par rapport à leur parent div de telle manière que les propriétés CSS ajoutées pour les enfants divs mettent en œuvre en fonction de la position de leur parent div. Cela se fait en ajoutant la propriété de position absolue dans l'élément de style CSS faisant référence à la classe ou à l'ID de l'enfant div.