[css] Position Relative vs Absolute?

What is the difference between position: relative and position: absolute in CSS? And when should you use them?

Position Relative:

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Position Absolute:

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Here is a good tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/ with the sample usage of both position with respective to absolute and relative positioning.

Another thing to note is that if you want a absolute element to be confined to a parent element then you need to set the parent element's position to relative. That will keep the child element contained within the parent element and it won't be "relative" to the entire window.

I wrote a blog post that gives a simple example that creates the following affect:

That has a green div that is absolutely positioned to the bottom of the parent yellow div.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Both “relative” and “absolute” positioning are really relative, just with different framework. “Absolute” positioning is relative to the position of another, enclosing element. “Relative” positioning is relative to the position that the element itself would have without positioning.

It depends on your needs and goals which one you use. “Relative” position is suitable when you wish to displace an element from the position it would otherwise have in the flow of elements, e.g. to make some characters appear in a superscript position. “Absolute” positioning is suitable for placing an element in some system of coordinates set by another element, e.g. to “overprint” an image with some text.

As a special, use “relative” positioning with no displacement (just setting position: relative) to make an element a frame of reference, so that you can use “absolute” positioning for elements that are inside it (in markup).

Relative : Relative to it’s current position, but can be moved. Or A RELATIVE positioned element is positioned relative to ITSELF.

Absolute : An ABSOLUTE positioned element is positioned relative to IT'S CLOSEST POSITIONED PARENT. if one is present, then it works like fixed.....relative to the window.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Here, 2nd parent div position is relative so the middle div will changes it's position with respect to 2nd parent div. If 1st parent div position would relative then the Middle div would changes it's position with respect to 1st parent div. Details

Relative vs Absolute:

• Difference: relative to itself, relative to the nearest positioned ancestor.
• Difference: Other elements arounds it honour its old existence, Other elements around it DO NOT honour its old existence.
• Similarity: Other elements arounds it DO NOT honour its new existence, Other elements around it DO NOT honour its new existence.

Marco Pellicciotta: The position of the element inside another element can be relative or absolute, about the element it's inside.

If you need to position the element in the browser window point of view it's best to use position:fixed

Putting an answer , as my reputation aint enough to comment. But dont look at this as an answer, just a additional info, as myself, had some problems with both footer, and positioning.

When setting up the page, so that my footer always stays at the bottom, with position absolute, and main container/wrapper with relative position.

I then found some issues with my text content, and a menu inside the same content(white part of page between header and footer), when setting these to absolute, footer no longer stays down.

Postitioning is, as you say a complex theme.

My solution, to the content I wanted in 'absolute' positon in my webpage, and not be pushed to the side, when in example opening a drop down menu, was to actually give it postition relative, and putting it 35em below my drop down menu. (35em is the heigth of my dropdown menu, when fully extended)

Then, Top:-35em, for the content that before was pushed to the side. And then adding margin-bottom:-35em. This way, the content is "below" my drop down menu, but visually it is side by side with my drop down menu! And the white space below down to the footer, is with only 10em margin, as it was before starting to play around with this. So my solution to this was like this :

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

I see your question is answered good, but after alot of troubleing I found this to be a very good solution, and a way to understand better how positioning works.. When I place my text content, below my drop down menu, it doesn't push my text to the side. If I changed the text to position absolute, the footer did not stay in place. As I can believe this is an issue for more people then me, I add this here. What in fact happends, is I put the text, 35ems, below my drop down.

Then, I visually put it right next to eachother, with relative position, and top:-35em;, and evening out the huge space below, with margin:-35em;

negative values are underestimated at times, very good functionality, when one understands these positions better!

Natually, fixed position, also seemed logic for my footer, but I do really want the footer to go below the viewport, if the text, or content, is longer than the viewport. And to stay at the bottom, if there is little content on the page.

This setupp fixed that very nicely, and remember to use 'em', not 'px' for a more fluid/dynamic page layout! :)

(there may be better solutions, but this works for me cross platforms, as well as devices).

Let's discuss a scenario to explain the difference between absolute vs relative.

Inside the body element say you have an header element whose height is 95% of viewheight i.e 95vh. Within this container you placed an image and reduced it's opacity to say 0.5. And now you want to place a logo image near the top left corner. I hope you understood the scenario. So you will have a lighter image in the header section with a logo on the top of it at the specified position.

But before starting this, i have set margin and padding to 0 like this

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

This ensures no default margins and padding is applied to elements.

So you can achieve your requirement in two ways.

First Way

• you give a class to the image say logo.

• in css you write

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• this placed the logo to the 40px from the top and left of the enclosing parent which is the header. The image will appear as if it placed as desired.

But my friend this is a bad design as to place an image you unnecessarily consumed so much of space around by giving it some margin when it was not required. All you needed is to place the image to that location. You managed it by cushioning it with margins around. The margin took space and pushed it's content deeper giving an impression that it is positioned exactly where you wanted. Hope you understood the issue by working it around like this. You are taking more space than required to place just an image at the desired location.

Now let's try a different approach.

Second Way

• the image with logo class is inside the header element with say header class. So the parent class is header and the child class is logo as before.

• you set the position property of the header class to relative like this

  .header{ position: relative; }

• then you added the following properties to the logo class

  .logo{ position:absolute; top:40px; left:40px }

There you go. You placed the image at exactly the same place. There won't be any apparent difference in the positioning from the naked eye between the first approach and second approach. But if you inspect the image element , you will find that it has not taken any extra space. It's occupying exactly the same area as much as it's own width and height.

So how is this possible? I said to the image logo class that you will be placed relative to the header class as you are the child of this class and that i specifically mentioned it's position as relative. So that any child of it's will be placed relative to it's top left corner. And that Your position need to be fixed inside this parent element. so you are given absolute. And That you need to move a little from top and left to the position i want you to be. Hence you are given top and left property with 40px as value. In this way you will be placed relative to your parent only. So if tomorrow i move your parent up or down or just anywhere, you will always be 40px to the top and left of your parent header's top left corner. So your position is fixed inside your parent no matter whether your parent's position is fixed or not in future(as it is not absolute like you).

So use relative and absolute for parent and child respectively. Secondly use it when you want to only place the child element at some location inside it's parent element. Do not use fillers like margins to push it forcibly. Give parent relative value and child which you want to move, the absolute value. Specify top, left bottom or right property to child class to place it inside parent anywhere you want.

Thanks.

Absolute will make your element out of your flow layout, and it will be positioned to the closest relative parent (all parents are static by default). That's how you use absolute and relative together most of the time.

You can also use relative alone, but that is very rare case.

I have made an video to explain this.

https://www.youtube.com/watch?v=nGN5CohGVTI