One of the common CSS techniques that can be a bit tricky at first is being able to absolutely position a child div element within a parent div container, relative to the parent.
There are numerous scenarios where you might require this sort of positioning for div and other HTML elements. For example positioning a div element at the bottom right of a footer, offsetting an image relative to it’s containing panel or positioning a child ul within the parent li for a menu system.
The one key thing to remember when trying to position a child div relative to it’s parent is that the child should be given the CSS property position:absolute; and the parent set to either position:absolute; or position:relative;. Other positioning styles for position:fixed; and position:inherit; may also work in some cases but will rarely be required.
If the parent has the position property omitted, then the child div would be positioned relative to the next containing div with a relative or absolute position. If no containing elements have these position properties set on the page, then the child will be positioned relative to the page body.
Let’s consider the following CSS positioning examples:
The HTML and CSS for this is pretty simple. The parent container is set to relative position and the child is set to absolute. To align the child to the bottom right we use bottom:0px; and right:0px;
<div class="parent"> <div class="child"></div> </div>
.parent { width:250px; height:250px; background-color:#CCCCCC; position:relative; } .child { width:100px; height:100px; background-color:#999999; position:absolute; bottom:0px; right:0px; }
If the parent div did not have the position CSS proerty set in this case, then it would align with the bottom of the page.
Let’s add another child box in this example. We’ll call these elements grandparent (large box), parent and child (small box).
As the parent is positioned relative to the grandparent with bottom:0px; then it is given a position:absolute. The child which is positioned top right of it’s parent is also position:absolute; with top:0px; and right:0px; and the grandparent has the CSS property position:relative;.
<div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>
.grandparent { width:250px; height:250px; background-color:#CCCCCC; position:relative; } .parent { width:150px; height:150px; background-color:#999999; position:absolute; bottom:0px; } .child { width:70px; height:70px; background-color:#666666; position:absolute; right:0px; top:0px; }
In the 3rd and final example, we see what happens with exactly the same setup as example 2 but with the position:absolute; CSS style removed from the middle ‘parent’ div container.
As the parent is not absolutely positioned, it will appear in the default top left position. The child however still has it’s absolute positioning set to the top right, so it is positioned relative to the next parent div that has position:absolute; or position: relative. In this case, the next parent container div is the grandparent.
<div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>
.grandparent { width:250px; height:250px; background-color:#CCCCCC; position:relative; } .parent { width:150px; height:150px; background-color:#999999; /*position:absolute;*/ bottom:0px; } .child { width:70px; height:70px; background-color:#666666; position:absolute; right:0px; top:0px; }
You can see these 3 examples in the CSS child/parent positioning demo
This is just what I needed, I always seem to forget to put a position on the parent/grandparent divs. Thanks!
Thank you so much for this!!! I’ve been trying to find a solution to my problem for weeks and your post really helped me.. thank you very much!
Great !
I was looking in many sites (css-tricks also) for demo for a simple code to implement example 1 inside WordPress editor, Found here. Thank you.
that nice explanation of position.
Thank you!!! Parent position. Bingo!
Im curious,how do you get child to extend parent height? seems like child can escape from parent.
Hi
how can forbid the child absolute position with no relative to his parent?
Got an interesting situation.
I have a parent/child situation, which works when doing position:relative on the parent and position:absolute on the child.
BUT what happens when you have the situation repeated multiple times.
eg a series of parent Div’s each with a child to be lower right located. It works correctly on the first, but then all the remaining children locate to the right (of the screen, outside the 1st parent)
ignore the above, found my mistake. The position:relative on the parent wasnt always being applied
Tom feel free to delete the above comment and this one
Thank you for your clear explanation. Nice.
BTW, you have each of your first two examples labeled “1.”
Great i was strucked from so many days thanks for the work
Thanks for explaining it so clearly. Really helped me.
can u explain the benefits of absolute. i didn’t get the benefits of it. replace absolute with relative in the stated code, still it would be same right?
How can I position a div inside a parent div and it does not get effected by positioning of adjacent divs
Thank you for these simple examples .
Very useful !