One of the most confusing things when first starting CSS is positioning. I’m going to explain the differences between the 2 main positioning techniques, absolute and relative.
Once you’ve grasped how to use these two positioning techniques, you’ll wonder how you ever build a site without them.
There are in fact 4 separate positions for content :
Static (the default), Fixed, Relative and Absolute.
Static is the default, which means if you don’t specify any positioning through CSS, your content will automatically be statically positioned. All this really means is that it behaves as you’d expect, in the normal flow of the content on the page. Fixed means the content is fixed at a stated position, such as the bottom of the page.
But lets look at the more wildly used Relative and Absolute positioning :
Relative positioning
Think of relative positioning as a rooting system. Setting an element’s position to relative sets roots where it is. You can then move the element “relative” to where its roots are by using horizontal and vertical positions. So you can tell a box to be 50px from the left and 50px from the top of where it originally was.
But because the elements roots are where you first put it, the space taken up by these roots remains. So if you had 3 boxes, and moved the middle one, the other 2 would stay exactly where they are, separated by the space taken up by the middle one.
Absolute Positioning
Absolute positioning has no roots. The element is in its own pot, and you are moving the pot around. Again you move the element around using horizontal and vertical positions, but this time other elements will fall into the gap that was left by the pot, as if it was never there in the first place.
So this time, moving a box 50px from the left and 50px from the top, is moving it from the edges of its container, not where it was originally.
Absolutely positioned elements use the edges of its nearest positioned container. What that means is that if the element is inside a div with position applied to it, it will be offset from the edges of that div.
If its not in any container with any positioning applied, it will default to the page container, which is basically the browser window.
The good part
The most powerful part of positioning is when you combine relative and absolute.
You set the container’s position to relative, then the element you are positioning to absolute, and set the horizontal and vertical positions of that element.
One of my next posts will be a tutorial to follow, using the various techniques in positioning, so make sure you check back here often!
But for now, have a go at positioning some elements all over the place. Once you get the hang of it, its a very accurate way to arrange your content.
