Positionnement absolu dans la position absolue

J’ai 3 éléments div .

La 1ère div est plus grande (wrap) et a la position:relative;

2ème div est positionné en absolu sur le 1er positionnement relatif de div (et est inclus dans le 1er div )

La 3ème div est contenue dans la 2ème division et a également un positionnement absolu.

 

Pourquoi la 3ème position du div absolue au 2 e div (qui est aussi la position absolue du 1 er div ) et non au 1 er div qui a une position relative?

Parce que la 3ème div est un positionnement absolu sur la 2ème division absolue positionnée.

Parce que la position: absolute réinitialise la position relative pour les enfants comme la position: relative .

Il n’y a pas moyen de contourner cela – si vous voulez que le troisième div soit positionné de manière absolue par rapport au premier, vous devrez en faire un enfant du premier.

Les deux position:relative et position:absolute établir des éléments contenant en tant que positionneurs de positionnement.

Si vous avez besoin que div 3 soit positionné en fonction de div 1, faites-en un enfant direct de div 1.

Notez que position: relative signifie que l’élément est positionné par rapport à sa position et à sa position naturelles position: absolute signifie que l’élément est positionné par rapport à sa première position:relative ou position:absolute ancêtre position:absolute .

Position statique: la position statique est la valeur par défaut dans laquelle un élément apparaîtra dans le stream normal de votre fichier HTML si aucune position n’est spécifiée.

Important: top propriétés top , right , bottom et left N’A AUCUN EFFET SUR UN ÉLÉMENT STATIQUEMENT POSITIONNÉ.

Position relative: le positionnement d’un élément avec la valeur relative conserve l’élément (et l’espace qu’il occupe) dans le stream normal de votre fichier HTML.

Vous pouvez ensuite déplacer l’élément d’une certaine quantité en utilisant les propriétés left , right , top et bottom . Cependant, cela risque de faire chevaucher l’élément sur d’autres éléments de la page, ce qui peut être ou non l’effet souhaité.

Un élément relativement positionné peut bouger de son emplacement, mais l’espace qu’il occupe rest.

Position absolue: appliquer la valeur de position absolue à un élément le supprime du stream normal. Lorsque vous déplacez l’élément positionné absolu, son sharepoint référence est le haut / gauche de son élément contenant le plus proche d’une position déclarée autre que statique – également appelé son contexte de positionnement le plus proche. Donc, si aucun élément contenant une position autre que statique n’existe, il sera positionné à partir du coin supérieur gauche de l’élément body.

Dans votre cas, le conteneur contenant le 3ème le plus proche est le 2ème.

Encore une autre réponse de clarification.

Votre scénario actuel est le suivant:

 #my-parent {position: absolute} #my-parent .my_child {position: absolute} 

Et tu te débrouilles avec ça.

Si vous pouvez changer le code HTML, faites simplement ceci:

 #my-parent {position: absolute} #my-parent .my-wrapper {position: relative} /* Since you've added the wrapper in HTML */ #my-parent .my-wrapper .my-child {position: absolute} /* Now you can play with it */ 

La raison pour laquelle le 3ème élément div est absolument positionné sur le deuxième élément div est que, comme l’indique la spécification CSS, l’élément “parent” (mieux dit: contenant un bloc) d’un élément absolument positionné n’est pas nécessairement son élément parent immédiat. , mais plutôt son élément positionné immédiat , c’est-à-dire tout élément dont la position est définie sur autre chose que static par exemple position: relative/absolute/fixed/sticky;

Par conséquent, chaque fois que cela est possible dans votre code, si vous voulez que le 3ème élément div soit absolument positionné par rapport à la 1ère div vous devriez faire de votre 2ème élément div position: static; qui est sa valeur par défaut (ou simplement supprimer toute déclaration de position: ... dans le jeu de règles de votre deuxième élément div .

Ce qui précède fera de la 1ère div le bloc contenant le 3ème div absolu, en ignorant la 2ème div pour ce but de positionnement.

J’espère que cela aide.