Position a child div relative to parent container in CSS

10 July, 2013 by Tom Elliott

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:
CSS child div positioning in parent example

1. Child div positioned at bottom right of parent

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;

The HTML

<div class="parent">
   <div class="child"></div>
</div>

The CSS

.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.

2. Child div positioned top right of parent and parent bottom left.

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;.

The HTML

<div class="grandparent">
   <div class="parent">
      <div class="child"></div>
   </div>
</div>

The CSS

.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;
}

3. Child div positioned top right when parent has no position.

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.

The HTML

<div class="grandparent">
   <div class="parent">
      <div class="child"></div>
   </div>
</div>

The CSS

.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



14 Comments

  • majic says:

    Thank you for these simple examples .
    Very useful !

  • Ty says:

    This is just what I needed, I always seem to forget to put a position on the parent/grandparent divs. Thanks!

  • mariness says:

    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!

  • 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.

  • mohit singhvi says:

    that nice explanation of position.

  • Walter Ian Kaye says:

    Thank you!!! Parent position. Bingo!

  • Tom says:

    Im curious,how do you get child to extend parent height? seems like child can escape from parent.

  • Meir says:

    Hi
    how can forbid the child absolute position with no relative to his parent?

  • Andrew BS says:

    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)

    • Andrew BS says:

      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

  • Sarah Moor says:

    Thank you for your clear explanation. Nice.

  • Robert M. says:

    BTW, you have each of your first two examples labeled “1.”

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php