Positioning an element relative to another element

01 November 2012

Using position absolute can be a little scary, because positioning elements to the viewport is quite random due to the various viewport sizes. But, there's a catch. Position absolute uses it's first element in the DOM tree which is positioned itself. It goes all the way up to the html (viewport) element.

DOM tree... whut?


What is the DOM tree? DOM stands for Document Object Model. And you can immediately forget this, but I'd like to throw in a few fancy words. This quote from thewebthought explains what it is:

The DOM tree is actually - guess what - a tree. It has a root and branches that are called nodes. Inside nodes there are elements or other nodes. We can visualise a DOM tree exactly like a tree and nodes like branches that can have other branches and so on.

So it is the structure of all alements in a page. The page starts with which contains two children; HEAD and BODY which also have lots of children like DIV, H1, B, A HREF, etc. This collection is called the DOM tree.

So, if you have this tree for example and you want to position the B tag:

<body>
  <nav>
    <p>
      <div style="position: absolute; top: 0px; left: 0px;"></div>
    </p>
  </nav>
</body>

It wil look at the P element. "Is this positioned somewhere?". No, lets move on... "Is the parent NAV element positioned then?". Also no. Then take the last element BODY and use that as a reference. The body is positioned in the upper left corner of the screen (by default) and thus the div element will also be positioned in the uppermost left corner because it has a left and up offset of zero pixels. That makes sense, doesn't it?

The trick


But when we (relative) position one of the elements in this tree (div > p > nav > body), then it will stop searching for a positioned element when it reaches that element.

<body>
  <nav>
    <p style="postion: relative;">
      <div style="position: absolute; top: 0px; left: 0px;"></div>
    </p>
  </nav>
</body>

In this example, the DIV will stop "searching" for a postioned element immediately when it reaches its parent P tag, because this element has a position style declared. The next interactive example shows what happens. The big yellow DIV element has a size of 300 x 300 pixels and is positioned relative. Since it doens't have a left, right, top or bottom value declared nothing really happens with the element. It stays at the same position it was initially rendered on. The red square has a position absolute and it is set to be in the right top corner.

Since the yellow element has a position relative it looks at this element as a reference and ignores all it's parents. You might have expected the red square to be positioned somewhere in the right top op this website, but it isn't. The yellow container is now its only reference.

Play around with the values and see what happens.

<div id="element1">
  <div id="element2">
  </div>
</div>
#element1 {
  width: 300px;
  height: 300px;
  background: yellow;
  position: relative;
}
#element2 {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  : px;
  : px;
}


It's quite easy, isn't it?! :)
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

4 comments

  1. Gravatar

    tartinesKiller

    28 May 2015

    Great! Easy and clear

  2. Gravatar

    markwelbar

    14 August 2014

    more about div positioning...

    http://www.corelangs.com/css/box/divindiv.html

    Mark

  3. Gravatar

    Phil Did,

    06 December 2012

    2 words = very good

  4. Gravatar

    m4rus

    24 November 2012

    Awesome! It is very usefull to understand how it works...