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:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
div#father { position: relative; } div#son1 { position: absolute; /* put your coords here */ } div#son2 { position: absolute; /* put your coords here */ }#father { position: relative; } #son1 { position: absolute; top: 0; } #son2 { position: absolute; bottom: 0; }This is valid because
position:absolutemeans "usetop,right,bottom,leftPosition yourself relative to a nearest ancestor withposition:absoluteorposition:relative."So we let
#fatherhaveposition:relativeand the children haveposition:absolute, and then usetop code> andbottomto locate subkeys.