bluefeet Yet another Perl Hacker weblog

CSS Element Positioning

I spent a good day trying to completely understand how CSS positioning works. There are a lot of misconceptions and superstitious out there and I found many people answering questions about CSS positioning with answers that were completely false. So, I had to dispel the mystery. I think that w3schools.com explains the possible values for the CSS position property the best.

• static Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations).
• relative An element with position: relative moves an element relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position.
• absolute An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.

So, relative positioning is EASY. Wherever the element would have been positioned in static positioning, is the 0,0 position for the relative element. Any top or left adjustments will be in relation to this point.

Absolute posotioning is where people get confused, it seems. When an elements position is abolute, its top and left positions are relative to it’s parent element’s top-most and left-most position, disregarding the parent element’s padding, as shown to the right.