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

Question

Hy,

J'ai une question que je ne pouvais pas trouver la réponse ...

Disons que j'ai 3 divs

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

2e div en position absolue de la 1ère div positionnement relatif (et il est inclus dans la 1ère div)

3ème div est contenue dans le 2ème div et aussi avoir un positionnement absolu.

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

Pourquoi le 3ème div en position absolute pour le 2ème div (qui est également la position absolue de la 1ère div) et de ne pas la 1re division, qui a la position relative ?

Parce que le 3ème div positionnement absolu à l'absolu placé 2ème div ...

Merci ..

Answer 1

Parce que position: absolute réinitialise la position relative des enfants exactement comme position: relative fait.

Il n’ya aucun 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.

Answer 2

Les deux position:relative et position:absolute établissent des éléments contenant des ascendeurs de positionnement.

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

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

Answer 3

Position statique: la position statique est la méthode par défaut d'un élément apparaîtra dans le flux normal de votre Fichier HTML si aucune position n'est spécifié à tous.

Important: top, right, bottom et left des propriétés ONT AUCUN EFFET SUR UN STATIQUEMENT POSITIONNÉ SUR L'É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 quantité en utilisant les propriétés de l' left, right, top et bottom. Toutefois, cela peut entraîner l'élément de chevauchement d'autres éléments qui sont sur la page-qui peut ou ne peut pas être l'effet que vous voulez.

Une position relative de l'élément peut passer de sa place, mais l'espace qu'il occupait reste.

Position absolue: l'application de la position absolue de la valeur à un élément retire de la circulation normale. Lorsque vous déplacez l'absolu placé élément, son point de référence est le haut/gauche de son plus proche contenant un élément qui a une position déclarée autre que statique-aussi appelé le plus proche de son contexte de positionnement. Donc, si pas de contenant l'élément à une position autre que statique existe, alors il sera positionné à partir du coin supérieur gauche de l'élément body.

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

Answer 4

Encore une réponse de clarification.

Votre scénario actuel est le suivant:

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

Et vous vous battez un peu avec ça.

Si vous pouvez modifier le code HTML, procédez 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 */