web-dev-qa-db-fra.com

Position absolue mais relative au parent

J'ai deux divs dans un autre div et je veux positionner un div enfant en haut à droite du div parent et l'autre div au bas de la div en utilisant css. C'est-à-dire que je veux utiliser le positionnement absolu avec les deux divs enfants, mais les positionner par rapport au div parent plutôt qu'à la page. Comment puis-je faire ceci?

Échantillon html:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>
htmlcss
385
BlaShadow
#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

Cela fonctionne parce que position: absolute signifie quelque chose comme "utilisez top, right, bottom, left pour vous positionner par rapport à l'ancêtre le plus proche qui a position: absolute ou position: relative. "

Donc nous donnons #father avoir position: relative, et les enfants ont position: absolute, puis utilisons top et bottom pour positionner les enfants.

699
Domenic
div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}
25
Brian Warshaw

Si vous ne donnez aucune position au parent, alors, par défaut, il prend static. Si vous voulez comprendre cette différence, reportez-vous à cet exemple

Exemple 1 ::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Ici, la classe parent n'a pas de position, donc l'élément est placé en fonction du corps.

Exemple 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

Dans cet exemple, le parent a une position relative et les éléments sont donc placés absolu dans le parent relatif.

6
anam

Incase quelqu'un veut placer une div enfant directement sous un parent

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Démo de travail Codepen

6
petergus