Position absolute but relative to parent
css, html
Solution
#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.
Problem
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> ```