Relative and absolute positioning in CSS

17 February 2011

The positioning of elements in a page can be done via various CSS methods. For every situation is an ideal solution. One of the solutions you can use is to position your elements with the absolute and relative values for the "position" attribute.

If you have an image halfway down your website and you want to place a banner over it and you want it to look something like this:
http://img.dreamdealer.nl/dd/positioning/stap1.png

Firstly you will create a container wich contains the image:
<div id="cardContainer">
    <img src="/img/card.png" alt="card image" />
</div>


This will look something like this:

http://img.dreamdealer.nl/dd/positioning/stap2.png

After this you create an element with a red background and the text "happy newyear":
<div id="cardContainer">
    <img src="/img/card.png" alt="card image" />
    <div id="cardMessage">
        Happy Newyear!!!!
    </div>
</div>

The CSS code for this element is like this:
#cardMessage {
   background: #FF0000;
   padding: 20px;
   font-size: 20px;
   color: #FFFFFF;
}

But if you look in your browser, you'll see that the banner is placed direct under the image

http://img.dreamdealer.nl/dd/positioning/stap3.png
Now we "only" need to position the red banner in the right top corner of the image. This is acheived by adding the "position: absolute;" tot he style of the element and giving it a position by adding "left: 0px;" en "top: 0px;".

#cardMessage {
   background: #FF0000;
   padding: 20px;
   font-size: 20px;
   color: #FFFFFF;
   position: absolute;
   left: 0px;
   top: 0px;
}

This will look like this:

http://img.dreamdealer.nl/dd/positioning/stap4.png

The element is positioned relativily to the whole page. Therefore it will always be in the uppermost left corner, regardless other content. But if you set the position to "relative", the browser will position the item according to its current position. The browser will look where the element is placed by default and will move it according to the position you enter. A top and left of zero pixels will always place the element on the exact same spot. But when you apply these CSS rules:
#cardMessage {
   background: #FF0000;
   padding: 20px;
   font-size: 20px;
   color: #FFFFFF;
   position: relative;
   left: 50px;
   top: -50px;
}

It will look like this:
http://img.dreamdealer.nl/dd/positioning/stap6.png

With this technique we could move the red element to the right top of the image. Let's get the left and top offset and it works like a charm. But there is one disadvantage of relative positioning. The element reserves a space at its original position. In our example there will be a white space on the grey area:

http://img.dreamdealer.nl/dd/positioning/stap7.png

If you want to place text directly under the image, you can't use this technique:

http://img.dreamdealer.nl/dd/positioning/stap8.png

Assuming that we don't know where the element will be located on the page we can't position the element absolute on the page. If we put the element 100 pixels from the top and 100 pixels from the left it will always be positioned on that spot, unregarded what the rest of the page looks like. If we enter these CSS rules:
#cardMessage {
   background: #FF0000;
   padding: 20px;
   font-size: 20px;
   color: #FFFFFF;
   position: asbolute;
   left: 0px;
   top: 0px;
}

The page could look like this...:

http://img.dreamdealer.nl/dd/positioning/stap9.png

... or like this:

http://img.dreamdealer.nl/dd/positioning/stap10.png

It will always stay in the upperleft corner.

But there is a "hack" for this. When an element is positioned absolute, the browser crawles up the DOM tree (the hierarchy of the nested elements on a page) untill it finds an element that is somehow positioned. When our complete HTML looks like this:
<html>
<body>
<div id="siteContainer">
    <div id="cardContainer">
        <img src="/img/card.png" alt="card image" />
        <div id="cardMessage">
            Happy Newyear!!!!
        </div>
    </div>
</div>
</body>
</html>

It will crawl in this order:

#cardMessage > #cardContainer > #siteContainer > body

In our case nothing is positioned in this tree, thus the browser will position the element according to the body (the highest level element, the whole page).

But when we give #cardContainer a position, it will position all other descendand elements according to that position. Won't we get the same problem with absolute positioning as before? No, because when we position an element relative and do not define a left, right, top or bottom position, it will stay in it's original position.

When we alter our CSS to this:
#cardContainer {
    position: relative;
}
#cardMessage {
   background: #FF0000;
   padding: 20px;
   font-size: 20px;
   color: #FFFFFF;
   position: asbolute;
   left: 0px;
   top: 0px;
}

It will look like this:


Now we only have to change the position values untill the red element is at his place and we're finished!
#cardContainer {
    position: relative;
}
#cardMessage {
   background: #FF0000;
   padding: 20px;
   font-size: 20px;
   color: #FFFFFF;
   position: asbolute;
   left: 310px;
   top: 30px;
}

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

    Ana

    07 October 2012

    love your website. Just shared this page and your tutorials page on stumbleupon...Thanks for sharing your knowledge!

  2. Gravatar

    Dreamdealer.nl

    27 September 2012

    If you don't specify the left and top values the element will be positioned at the point it is rendered on by the document flow. But the rest of the elements will ignore this absolute positioned element because it hase broken the document flow and has no place between other elements anymore.

    But you can also use bottom and right values to position an element, if that is what you want to know.

  3. Gravatar

    anil

    27 September 2012

    this is not what i want.. is there any way to position an element absolute without specifying top: and left: attributes??

  4. Gravatar

    MrSmith

    03 October 2011

    Awesome !