Difference Between Relative and Absolute Positioning

By | May 2, 2013
When I first came across to this topic of positioning, I found it complicated at first read.  I researched more about it on Google and cleared my doubts regarding it. In this post I’ll make you go through the core concept behind relative position and absolute position.

Absolute Positioning and Relative Positioning

When you set any element to position: absolute, you make it fixed at that particular place. Suppose you place an element 10px from left and 10px from bottom, it will position itself with respect to the top-left corner of the window. But, you never use position: absolute; alone for an element. It should be integrated with its parent element which is positioned relative. Just look at this below given visual demo. There are two elements: one is the parent element and the inner element which is surrounded by parent element is the child element. The parent is positioned relative and child is positioned absolute. Look how they are positioned using top, left, right and bottom properties in respect with parent element.
absolute and relative position difference
Image 1

What if parent element is not positioned relative?

If you don’t make the parent element positioned relative, then the child elements which are positioned absolute will just get into the normal flow and will position themselves in respect to the top-left corner of your   window. The parent element will be positioned static as default. Look at this visual demo.
parent element with positioning relative
Image 2

  What if nothing set?

The elements will just flow with the natural flow of the design. They will just looked stacked below each other, if the directive properties like top,left, bottom are not set.
There much more positioning properties including floats, visibility, display and Z-index. I’ll explain each of them later. I hope this cleared your doubts regarding absolute and relative positioning. Enjoy guys!
Image Credits: Image1, Image2 css-tricks

Leave a Reply

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