Absolute

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

Most important thing about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning.

This is a heading with an absolute position
With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.

Relative

This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”.
A relative positioned element is positioned relative to its normal position. The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Relatively positioned element are often used as container blocks for absolutely positioned elements.
example –

This is a heading with no position
This heading is moved upwards according to its normal position
Note: Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.