if you place a div on the page in it’s default or static position. Then it would appear in the upper left corner. If you put position:relative on it you can then use top: and left to place it outside of it’s normal position. Why use position:relative? why not just use margins to move the box where you want so instead of
In most websites there’s little or no reason to ever use position, be it relative, absolute, fixed. I’m a firm believer in retaining the natural flow of the html layout using margin, padding and float to ‘nudge’ elements into place. However, there are occasions when you might wish to tweak an elements’ position relative to its natural position in the html flow – to line-up an image with a border perhaps or a myriad of other reasons. Also, position:relative; is often used as an IE6 hack along with zoom to force IE6 to behave itself. I agree that position is grossly over used in web design and I think this is a legacy of the transition for many web designers converting from table-based layouts and utilising the ‘layers’ feature in Dreamweaver. Whatever the reason, the position element is certainly abused by many designers, but remains perfectly valid if used appropriately.