Position absolument positionnée DIV par rapport à (également positionné) parent DIV?

Question

C'est un problème que je l'ai toujours quand je fixation mises en page. J'ai un DIV complètement positionné, je place un enfant-DIV à l'intérieur qui doit également être positionné de façon absolue. Mais je veux vraiment que ce DIV enfant se comporte par rapport au parent ... Est-ce que c'est possible? Ou dois-je créer un Wrap-DIV?

<div class="container" style="position:relative;"> 
    <div class="parent" style="position:absolute;"> 

     <!-- this child div will behave relative to .container --> 
     <div class="child" style="position:absolute;"></div> 
    </div> 
</div> 

Ceci est la solution « d'emballage » que je préfère éviter:

<div class="container" style="position:relative;"> 
    <div class="parent" style="position:absolute;"> 
     <div class="wrapper" style="position:relative;"> 

      <!-- this child div will behave relative to .wrapper--> 
      <div class="child" style="position:absolute;"></div> 
     </div> 
    </div> 
</div> 

Answer 1

Un élément en position absolue est positionné par rapport aux bords de son ancêtre le plus proche qui ne sont pas positionnés (à savoir pas de position: static).

Puisque l'élément parent est position: absolue, l'enfant sera positionné par rapport à ses bords.

Vous semble se demander comment obtenir le comportement que vous avez déjà. Le commentaire dans votre premier exemple semble être incorrect.

Answer 2

Vous voudrez peut-être vous demander si vous avez vraiment besoin d'utiliser plusieurs éléments imbriqués, positionnés de manière absolue.

Sinon, il pourrait être préférable d'opter pour la solution d'emballage.

Answer 3

Si vous êtes déjà un positionnement absolu div, ne pouvez pas vous suffit d'ajouter les deux compensations ensemble pour l'enfant? par exemple. pour #one d'être à 10,10 et #two à 10,10 par rapport à #ONE,

#one { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

#two { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
} 

Ou est-ce quelque chose de fantaisie, comme le verrouillage de #one au coin supérieur gauche et #two en bas à droite de #one, auquel cas les mathématiques de base ne fonctionnent pas de cette façon? Dans ce cas, un div supplémentaire est probablement nécessaire.

Ou suis-je juste quelque chose fatigué et manquant?