Article: Absolutely relative

from http://www.wpdfd.com/issues/78/absolutely_relative

Absolutely relative

by Joe Gillespie — Sep 1, 2004

The concepts of absolute and relative positioning in CSS can be quite confusing and are often misunderstood.

Absolute positioning puts CSS boxes (divs) at specific pixel locations in the browser window, just like pinning cards on a notice board. Usually, the absolute position is measured from the top left corner of the page but it doesn't have to be, as you will see.

For relative positioning, the analogy I often use is that of polystyrene blocks in a swimming pool – they float until they are pushed downwards by another one from above. If you specify float: left or float: right, that makes them float horizontally instead of vertically.

Used exclusively, absolutely positioned divs produce hard, static layouts which invariably break in the plethora of screen sizes we have to contend with.

Relatively positioned layouts, on the other hand, can adjust to the size and shape of the browser window and are much more likely to give satisfactory results on the maximum number of systems – but that means the actual layouts are less predictable and sometimes get just plain silly when the lines of text get too long.

By combining relative and absolute positioning, you get more control without losing the flexibility. The key to this is the fact that absolutely positioned boxes don't have to be placed relative to the browser's edges, they can be positioned relative to any div you put them in.

If you put an absolutely positioned box inside a relatively positioned box, it moves with that box. It is absolutely relative!

It's just like walking around inside a plane. The plane is travelling relative to the airport but when you move around inside it, you seem to be at some point, say, six feet away from your seat and two feet to the left.

Apart from the wisdom of having layouts that are less likely to break, this also opens up a whole new set of possibilities. You can put images or captions next to blocks of text and they stay there. Unlike the rectangular constraints imposed by using tables, these 'satellite' divs can go anywhere in a complete 360° arc around the text – or over or behind it.

Keep things flexible

I try to avoid the top-left way of thinking that many designers seem to embrace by default. I like to float my content in the horizontal centre of the page so that it looks balanced on any monitor and not lop-sided. To do this, you can specify right and left margins and let the content stretch or specify the content width and let the margins take up the slack. To keep Internet Explorer happy, it is also necessary to put the entire page inside ...

or, more correctly, use . Either will validate.

That's just one way of doing it. It works fine for all monitors 800 x 600 or larger. If you need to accommodate smaller screens, you can use percentages.

Having established a 'page' div, I just put relatively positioned rows one above another much like the rows in a table. Inside each row are three columns. col1 holds the vertical section headings, col2 is for headings and pictures and col3 is the main text. The height of each row is determined by the amount of text in col3.

A box's z-index property controls the layering. Most of the time, you don't have to be too concerned about z-index. Absolutely position boxes adopt their z-index values automatically based upon the position of the div in the markup – the further down in the markup, the higher its layer will be.

Sometimes, you might want to manipulate the z-index value if the default is not giving the effect you want. All you have to do is to make sure that the frontmost box has a higher z-index value. You don't have to change z-index values in steps of 1. In fact, it is better to give them steps of 10 or 100 in case you want to put something in between at a later date.

So, now you have an image that can be positioned anywhere around a text box, behind or in front. You can also play that trick the other way round. If you want to add a small caption to an image, put the .textpanel inside the .picbox. In this instance, you should probably set the width and height of .picbox and the width of .textpanel to a value smaller than .picbox width. If you want the caption to overprint the picture totally or partly, just place it wherever you like inside .picbox.

Then, you can do both and go all the way. Make the picture relative to the textpanel AND make the caption relative to the picture.

Experiment! Once you start playing with these techniques you will find all kinds of interesting layout possibilities.

About the styles

For all these examples, I have created basic classes in the main stylesheet in the head section of this page. I then modified those styles locally using 'inline' styling for their margin-left and margin-top properties. Have a look at the source.