Position absolute but relative to parent

Question

I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using CSS. Ie, I want to use absolute positioning with the two-child divs, but position them relative to the parent div rather than the page. How can I do this?

Sample HTML:

<div id="father">

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

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

</div>

Answer 1

In CSS, you can try this:

#father {

   position: relative;

}

#son1 {

   position: absolute;

   top: 0;

}

#son2 {

   position: absolute;

   bottom: 0;

}

The above Id selector works because of position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative." So you can make #father have position: relative, and the children have position: absolute, then use top and bottom to position the children.