Relative:
Ralative allows you to place an object in relation to where it would normally have been positioned if only HTML were the only position control. What this means is that you position an HTML element within the current flow of the document. It gives you less control over the actual layout of the page, but allows you to position elements within the page itself.
<Example>
<p>
Relative Sample Test
<img src="img01.gif" width="50" height="50" border="0" alt="sample image" /><br>
<div style="position:relative; left:0px; top:0px; color : #cc0000;">
Then another text block</div>
</p>
Absolute:
Absolute positioning takes its starting point from the upper left corner of the browser pane, this is coordinate 0,0. Once you use absolute positioning, this object does not affect any other object in the flow.
<Example>
<p>
Scroll to the left to see my image, positioned 500 pixels from the left and 500 pixels down from the top of the browser window.
</p>
<div style="position: absolute; left: 500px; top: 500px;">
<img
src="img01.gif" width="50" height="50" border="0" alt="sample image" />
</div>