Positionnement absolu à l'intérieur de la position absolue

J'ai 3 divéléments.

Le 1er divest plus grand (enveloppement) et aposition:relative;

Le 2nd divest positionné de manière absolue au 1er divpositionnement relatif (et est inclus dans le 1er div)

Le 3e divest contenu dans le 2e divet a également un positionnement absolu.

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

Pourquoi la 3ème divposition est-elle absolue à la 2ème div(qui est également la position absolue à la 1ère div) et non à la 1ère divqui a une position relative?

Parce que le 3ème divest le positionnement absolu au 2ème positionné absolu div.

Parce que position: absoluteréinitialise la position relative des enfants tout comme le position: relativefait.

Il n'y a pas moyen de contourner cela - si vous voulez que le troisième divsoit absolument positionné par rapport au premier, vous devrez en faire un enfant du premier.

Les deux position:relativeet position:absoluteétablissent des éléments contenant comme des ascesteurs 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 cela position: relativesignifie que l'élément est positionné par rapport à sa position naturelle et position: absoluteque l'élément est positionné par rapport à son premier position:relativeou position:absoluteancêtre .

Position statique: la position statique est la façon dont un élément apparaîtra par défaut dans le flux normal de votre fichier HTML si aucune position n'est spécifiée du tout.

Important: top, right, bottomet leftpropriétés sont sans effet sur une statiquement PLACÉ élément.

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

Vous pouvez ensuite déplacer l'élément par une certaine quantité en utilisant les propriétés left, right, topet bottom. Cependant, cela peut entraîner le chevauchement de l'élément avec d'autres éléments de la page, ce qui peut ou non être l'effet souhaité.

Un élément relativement positionné peut bouger de son emplacement, mais l'espace qu'il occupait reste.

Position absolue: appliquer la valeur de position absolue à un élément le supprime du flux normal. Lorsque vous déplacez l'élément positionné absolu, son point de référence est le haut / gauche de son élément conteneur le plus proche qui a une position déclarée autre que statique, également appelée son contexte de positionnement le plus proche. Ainsi, si aucun élément contenant avec 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 clarifiante.

Votre scénario actuel est le suivant:

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

Et vous avez du mal avec ça.

Si vous pouvez modifier le HTML, procédez simplement comme suit:

#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 divélément est absolument positionné sur le 2ème divélément est que, comme l'explique la spécification CSS ici , c'est parce que l'élément "parent" (mieux dit: bloc contenant) d'un élément positionné de manière absolue n'est pas nécessairement son élément parent immédiat, mais plutôt son élément positionné immédiatement , c'est-à-dire tout élément dont la position est définie sur autre chose que staticpar exempleposition: relative/absolute/fixed/sticky;

Par conséquent, dans la mesure du possible dans votre code, si vous voulez que le 3ème divélément soit absolument positionné par rapport au 1er, divvous devez faire de votre 2ème divélément position: static;sa valeur par défaut (ou simplement supprimer toute position: ...déclaration dans l'ensemble de règles de votre 2ème divélément) .

Ce qui précède fera du 1er divle bloc contenant du 3ème positionné de manière absolue div, ignorant le 2ème divà cette fin de positionnement.

J'espère que cela aide.

Au cas où quelqu'un cherche encore une réponse à cela.

J'ai pu obtenir ce résultat en ajoutant un clear: both;style au premier div positionné de manière absolue qui réinitialise l'enfant et lui permet d'utiliser son propre absolutepositionnement.