Now to many people this might be a really simple concept, that is the concept of using absolute and relative positioning; but I remember when I started web design I wasn’t really sure what either meant. So this article is aimed at explaining why you might want to use the two properties in conjunction with one another, to have more control over how your site looks. So we’ll start with absolute positioning.
When you set an element’s position property to “absolute” you are telling the browser that no matter what configuration (browser size/resolution), you want that element to be in the same place. You also take that element out of the flow so that it doesn’t affect any other element on the page. So as an example if you set an element’s position to absolute, you can then say how far from the top, bottom, left, or right you want to to be – relative to the browser window. So…
#element {
position:absolute;
top:10px;
right:10px;
}
Would send your element to the top-right of the browser window.
Why would you want to do this? Well little example here – my canvas example from a few posts ago, positions the options panel in the top right-hand corner of the screen. Why? Because I want it out of the way, but always available. This style of positioning is interesting because it means you can ensure how an element will look. Maybe you want an ad in the bottom left. Perhaps you want a feedback link always on the left? Or maybe you just want better control of comment meta data. And that’s a great example. Many sites use absolute positioning to position things such as meta data with other elements as to make sure they don’t move a pixel out of line.
But how would one go about doing that, if absolute positing is relative only to the browser window? I hear you ask. Well, this is the part where I introduce you to our little friend, relative positioning.
Now in nearly every tutorial about positioning, when they get to the subject of relative positioning they usually say something along the lines of “it will make the element’s position relative to itself” – but what on Earth does that mean?! Basically you are able to offset the element relative to where it would have been. So if one element was supposed to be at the coordinates (200,100) and you set it’s position to relative and top:50px; right:20px, it will now lye at (250,120). All very well and good. But how does this relate to absolute positioning? Well here’s where it gets interesting – if you have a container which is positioned relatively, and an element inside of that container positioned absolutely, then the element will be positioned relative to the size of the container. See below.
So that’s about it. A combination of these two types of positioning can be really useful – I use it all the time for styling the sometimes tricky comments section of WordPress themes and there are a million other applications for the wonderful CSS property – and remember with great power, comes great cross-browser-compatibility 😉
Why jellybeans? Because it would be a heck of a job positioning them (oh and they look nice :)).