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    lt div id  father  gt      lt div id  son1  gt  lt  div gt      lt div id  son2  gt  lt  div gt   lt  div gt

User · Answer

Incase someone wants to postion a child div directly under a parent   father      position  relative      son1      position  absolute     top  100       Working demo Codepen

User · Answer

father      position  relative      son1      position  absolute     top  0      son2      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    So we make  father have position  relative  and the children have position  absolute  then use top and bottom to position the children

User · Answer

If you don t give any position to parent then by default it takes static  If you want to understand that difference refer to this example  Example 1    http   jsfiddle net Cr9KB 1       mainall        background-color red      height 150px      overflow scroll     Here parent class has no position so element is placed according to body   Example 2    http   jsfiddle net Cr9KB 2    mainall       position relative      background-color red      height 150px      overflow scroll     In this example parent has relative position hence element are positioned absolute inside relative parent

User · Answer

div father       position  relative    div son1       position  absolute         put your coords here      div son2       position  absolute         put your coords here

[html] Position absolute but relative to parent

Examples related to html

Examples related to css