That, is the question. This is one of the golden rules that unfortunately doesn't get much importance except from people who actually understand the importance of it. So I'll break this up into three parts.

The Importance

Positioning elements takes them out of the standard stack of elements on a web page. It allows them to be placed anywhere, without it affecting the neighbouring elements. There are four ways to position elements, absolute, fixed, relative and static. Static positioning is the same as not positioning them at all. Absolute and Fixed takes it out of the stack and using top, right, bottom and left, it can be placed anywhere. The sole difference being that Fixed fixes the element at the place and hence it doesn't scroll with the page. Its always visible, whereas Absolute places it at those exact pixel co-ordinates (scrollable). Relative allows to place the element relative to what its position would be if it wasn't positioned at all.

The reason elements should have the position:value style present is because any elements contained within such an element can be positioned relative to it. An element is positioned relative to the closest positioned parent element. Which means:

#parent-top{position:absolute;}
#child_parent-top{}
#child_child_parent-top{position:absolute;}

If the above style is applied to a page, then the following will be positioned as explained.

<div id="parent-top"> // DIV 1

<div id="child_parent-top"> // DIV 2

<div id="child_child_parent-top"> // DIV 3 </div> </div> </div>

<div> element 3 will be positioned relative to <div> element 1, whereas <div> element 1 will be positioned relative to the main document. <div> element 2 will appear in the document where its meant to appear relative to the unpositioned neighbouring elements.

Clear? Good! No? There is a very good explanation on positioning elements at BarelyFitz Designs. Have a look to get a good understanding of how it works!

Absolute Vs. Relative Vs. Fixed

As far as I'm concerned, absolute positioning should be used only when the need arises. It should not be a substitute for placing certain sections in a certain place. I've seen people absolutely position an element which appears right at the bottom in the markup, right at the top. They could have written it at the top, and not have had to position it then. The more elements you pull out of the normal stack, the more messed up the design might get. Plus, its not that easy to locate positioned elements in the markup since its orientation is lost. Hence its a pain to debug a stylesheet and markup which is made of absolutely position elements.

Relative positioning should be used when the designer is not sure of the resolution at which the page will be viewed. But its generally useless, since its better to use % and em to fix cross resolution problems. This should be only used if you want to give the element a position:value style to position elements contained within this element. But even for this, I'll suggest using position:static. Its more definite.

Fixed really pulls things out of their stack place, and fixes them at the co-ordinates specified, on a different z index altogether. Any elements around this will not be affected until you start scrolling. You'll see this jammed in place, while others go around it. It can be an annoyance, and hence should be only used for things like links/navigation/header bars. Things which you know should be readily available at all times, in the same place of the screen. For example the translucent links bar (Firefox/Opera Only) at the bottom of the screen on this blog. Finally a note of caution why this shouldn't be used as freely as absolute. It's not handled by Internet Explorer. This specification behaves likes an absolute positioning.

Conclusion

So, now at the end of this article, I hope you've learnt a small bit of positioning elements on your page using CSS, and I hope you don't make the same mistakes many other people make. Improve the viewer experience, not degrade it! :) Here's to a better site! c|_|