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="parent">
   <div id="child1"></div>
   <div id="child2"></div>
</div>

Answer 1

#parent {
   position: relative;
}
    
#child1 {
   position: absolute;
   top: 0;
}
  
#child2 {
   position: absolute;
   bottom: 0;
}

This works because 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."

This is the same working principle for height or width, when you use a relative unit. The value is applied in relation to the containing block.

So we make #parent have position: relative, and the children have position: absolute, then use top and bottom to position the children.