Relative vs Absolute in CSS

Question

Can any one explain me in detail about relative and absolute in CSS. All the descriptions tells me that absolute can be placed any place I want (that means I can use top, bottom, etc). I can achieve the same with the relative as-well. I was just checking a small example in relative and absolute in W3schools, wherein relative occupies the whole line but absolute doesn't. I am confused with this.

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative

Can anyone explain me with a perfect example about their difference?

The accepted answer in the dupe is wrong in the absolute positioning explanation. Take a look at the comment with 72 upvotes. — Marcos Pérez Gude, Nov 23 '15 at 08:56

score 1 · Accepted Answer · edited Nov 23 '15 at 10:09

I think you can get the better understanding to Css Positioning from this source

Quick Summary of the 4 Kinds of Positioning:

Static - Static positioning is the default, it is what happens when you set no positioning. The element (the tag and its content) stays in normal page flow.

Relative - The element's box is still part of the page flow, and but its location is changed vertically and/or horizontally relative to its own normal position in page flow.

Being part of flow (being in page flow) means that an element will push later elements in flow further down, and be pushed further down by elements in flow that are before the current element.

Example of Relative CSS positioning:
.fromorig {position: relative;
     top: 200px;}
Fixed - The element's box is removed from the normal page flow, and you can set exact vertical and horizontal position of the element relative to the browser window. Additionally, the fixed element's contents will NOT scroll away like normal HTML page contents do, they will stay in their current position in the browser window. Fixed positioning was not supported by IE until version 7.

Example of Fixed CSS positioning:
.nevermove {position: fixed;
      top: 200px;
      left: 200px;} 
Absolute - The element's box is removed from the normal page flow, and you can set exact vertical and horizontal position of the absolute element relative to the element it is inside. Additionally, the absolute element's contents will scroll vertically (and/or horizontally) like normal HTML page contents do.

Example of Absolute CSS positioning:
 .moveit {position: absolute;
   top: 200px;
   left: 200px;}

see demo at:

CSS Positioning With example

Relative vs Absolute in CSS

1 Answers1