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>
Best Answer
This works because
position: absolute
means something like "usetop
,right
,bottom
,left
to position yourself in relation to the nearest ancestor who hasposition: absolute
orposition: relative
."So we make
#father
haveposition: relative
, and the children haveposition: absolute
, then usetop
andbottom
to position the children.