CSS 201

An introduction to Positioning

This page was originally written by Bill Marshall on 12 Sep 2007 as an article for Oyster Web.

We've looked at the straightforward use of CSS for formatting, now it's time to look at more advanced ideas and introduce positioning - an essential component if you wish to use CSS for page layout rather than just formatting.

A container div can be given a position. This can be one of four types: absolute, relative, static, or fixed. Understanding the difference between these is the key to understanding how to lay out pages in CSS, but the names can be a little confusing.

Lets first look at what happens to a normal div with no special positioning - this is the same as position: fixed which does not normally need to be declared as it is the default. It will appear in the normal flow of the HTML and will merely act as a container - being the full width of the container it is in (the body if there is no other) and whatever height its contents make it. It will sit where you would expect it to on the page, after any Content that is before it in the code and before any code after it. However it can be given a width and height in which case it will conform to those dimensions.

Give that div a position absolute and things change dramatically - it is lifted out of the flow of the code and floats as a layer with its position governed by its left and top parameters from its container (again this is the body if there is no other so in that case it would be from the top left corner of the window) and its width governed by its width attribute. It can either have a specific height or it can allow its height to be governed by its content.

An absolutely positioned div should not be put inside a table cell - this will cause all manner of cross-browser inconsistencies. It can however be put inside another div which is itself positioned (either absolute or relative) in which case its position is set in relation to that div.

The position attributes can be manipulated by JavaScript so it is possible to have moving layers.

A div which is set as position: relative works rather differently and is perhaps the most misunderstood. Some people assume that it is relative to another div but this is not the case. In fact it stays with the flow of the html but the position parameters move its visual position relative to the place it would normally occupy in the flow. An important aspect is that it can now act as a container for one or more absolutely positioned divs. This is an important feature because if it's position on the page changes - say some more text is added above it, or perhaps the user increases the size of their viewing font - then the contained absolutely positioned div will move with it. This is very important for such things as flyout menus which need to remain in synch with their main menu items.

One thing to be aware of with position relative divs is that if you float content within it then the borders will not default to wrapping around the content (except in IE which erroneously handles the behaviour) but will overflow. In order to make it wrap, and show borders where they are expected you need to either clear the floats or apply an overflow property.