web-dev-qa-db-fra.com

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

J'ai 3 div éléments.

1er div est plus grand (envelopper) et a position:relative;

2nd div est positionné absolu au 1st div positionnement relatif (et est inclus dans le 1st div)

Le 3e div est contenu dans le 2e div et a également un positionnement absolu.

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

Pourquoi la 3ème div position absolue par rapport à la 2ème div (qui est également la position absolue par rapport au 1er div) et pas à la 1ère div qui a un rapport position ?

Parce que le 3ème div est un positionnement absolu par rapport au 2ème div en position absolue.

htmlcsscss-position
75
pufos

Car position: absolute réinitialise la position relative des enfants comme position: relative Est-ce que.

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

84
Pekka 웃

Tous les deux position:relative et position:absolute établit les éléments contenants comme des ascenseurs de positionnement.

Si vous avez besoin que div 3 soit positionné sur la base 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 naturelle et position: absolute signifie que l'élément est positionné par rapport à son premier position:relative ou position:absolute ancêtre.

21
Mike Tunnicliffe

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

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

Position relative: le positionnement d'un élément avec la valeur relative conserve 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 d'un certain montant en utilisant les propriétés left, right, top et bottom. Cependant, cela peut entraîner le chevauchement de l'élément avec d'autres éléments qui se trouvent sur la page, ce qui peut ou non être l'effet souhaité.

Un élément relativement positionné peut se déplacer de sa place, mais l'espace qu'il occupait reste.

Position absolue: l'application de la valeur de position absolue à un élément le supprime du flux normal. Lorsque vous déplacez l'élément positionné en 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é son contexte de positionnement le plus proche. Ainsi, s'il n'existe aucun élément conteneur ayant une position autre que statique, il sera positionné à partir du coin supérieur gauche de l'élément body.

Dans votre cas, le conteneur le plus proche du 3e est le 2e.

12
Gaurav

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 êtes en quelque sorte en difficulté.

Si vous pouvez changer le 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 */
4
valk

La raison pour laquelle le 3e élément div est absolument positionné par rapport au 2e élément div est parce que, comme l'explique la spécification CSS ici , c'est parce que l'élément "parent" (mieux dit: contenant le bloc) d'un élément absolument positionné n'est pas nécessairement son l'élément parent immédiat, mais plutôt son élément immédiat positionné 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 3e élément div soit absolument positionné par rapport au 1er div, vous devez faire de votre 2e élément div un position: static; qui est sa valeur par défaut (ou supprimez simplement tout position: ... déclaration dans le jeu de règles de votre 2ème élément div).

Ce qui précède fera du 1er div le bloc contenant du 3e positionné de façon absolue div, ignorant le 2e div à cette fin de positionnement.

J'espère que ça aide.

1
atzom