My blog has moved into Beta!



Please note that my blog has changed addresses! It's all new and improved. Hence this old friend of mine had to be left alone. You can visit me at The Last Word (beta). It's all warmed up for you! :)

« Home

Asynchronous/Aditya's Blogger CategoriesA bunch of tributes!Google should stick to search?Dwelling into APIsWhy take the hard road?Vista, too complex for Microsoft?Native Blog SearchJSON and the dynamic <script> tagAbout BloggerattoMicrosoft At It Again!  »





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|_|


0 Comments




Leave your comment
You can use some HTML tags, such as <b>, <i>, <a>

Or you can sign in as a different user.







Categories

Latest Updated

Subscriptions

Get My Blog In Your Mail!

Powered by Yutter

add this button to your site/blog as a link to this page! « link to me!
coComments my coComments
my claimID

subscribe to feed
Widgetize!
Google Reader add to google
del.icio.us The Last Word add to del.icio.us
Add to My Yahoo! add to yahoo!
Subscribe with Bloglines add to bloglines
add to msn
Add to netvibes add to Netvibes!
myFeedster add to feedster
Furl The Last Word add to furl


Archive Pages
January 2006 February 2006 March 2006 April 2006 May 2006 June 2006 July 2006 August 2006 October 2006 November 2006 December 2006

Advertisement


Song Of The Day:




Creative Commons License Widgetize!
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
Aditya Mukherjee © 2005-06 | Powered by Blogger