Absolute position but relative to parent

Question

I have two divs inside another div and I want to use css to position one child div to the top right corner of the parent div and the other child div to the bottom of the parent div. I.e. I want to use absolute positioning for the two child divs, but position them relative to the parent div instead of the page. How can I do this?

Example 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;
}

This is valid because position:absolute means "use top, right, bottom, left Position yourself relative to a nearest ancestor with position:absolute or position:relative."

So we let #father have position:relative and the children have position:absolute, and then use top code> and bottom to locate subkeys.