Position absolue mais relative au parent

Question

J'ai deux divs dans un autre div et je souhaite positionner un div enfant dans le coin supérieur droit du div parent et l'autre div enfant en bas du div parent en utilisant CSS. C'est-à-dire que je souhaite utiliser le positionnement absolu pour les deux div enfants, mais les positionner par rapport au div parent au lieu de la page. Comment puis-je faire ceci?

Exemple HTML :

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

Answer 1

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

Answer 2

#father {
   position: relative;
}
    
#son1 {
   position: absolute;
   top: 0;
}
  
#son2 {
   position: absolute;
   bottom: 0;
}

Cela fonctionne car l'ancêtre le plus proche de position：absolute意味着“使用top，right，bottom，left 将自己定位到与具有 position:absolute 或 position:relative est associé au poste. »

Nous laissons donc #father有position:relative，孩子们有position:absolute，然后使用top code> 和 bottom localiser l'enfant.