At first glance the ‘fixed’ and ‘absolute’ positioning values in CSS appear to be identicle. However, there is an important distinction that must be made.
Absolute positions take an element (such as a box) away from the normal flow of the webpage layout. They are assigned a specific and exact location via x/y co-ordinates. Values assigned in absolute positioning move the element away from the exact top and left portion of the page.
Fixed positions also move an element away from the normal flow and place it according to x/y co-ordinates away from the top left point (0,0). But in this case it positions the element away from the top left point of the viewed area (viewport) of the page, not the top left point of the page in whole.
Let’s assume we took two elements and assigned both positioning values as follows:
top: 5px;
left: 44 px;
If the elements were the same size, they would be exactly overlapped near the top of the page, inset from left by 44 pixels. If we scrolled down a long page however, the absolute positioned element would stay in place while the fixed element would continue to display in the top of our viewing area.
You can currently see fixed positioning in use in some annoying advertising on websites. Of greater benefit however, is the potential for fixed navigation on sites.
There is a drawback to fixed positioning. IE 6 and earlier do not support it.
Thank you for article. It is really imformative stuff.
I really like to browse http://www.lewiscom.ca.
sarasota teeth whitening
hi
I mostly use relative positioning. Fixed positioning has its place too, for menus or even advertising/promos etc that need to stay on the viewable screen area. Both fixed and relative positioning are predictable in their behavior and offer great utility, but I have never understood the purpose of absolute positioning when it’s only going to blow out your design by shifting the absolute positioned block unpredictably when the user re-sizes his/her browser.
I guess I must be missing the point of absolute positioning unless of course it’s just another of those odd things you often see on the web like the so-called web developers using points for sizing text or line-height on web pages instead of using pixels or ems. You can do it if you really want to but you shouldn’t ever do it for web code because it is unpredictable and just plain wrong.