Why I like absolute positioning

Introduction

I wrote an article some time ago, on how to get absolute positioning to work with IE6. However, a large part of that article ended up being an explanation as to why anyone might want to use absolute positioning. So, I've decided to split the original article in two. This part deals with what absolute positioning is and why you might want to use it.

If after you have read this, you think you might still want to use absolute positioning, and even worse, you insist on getting it to work on IE6, then you might like to read the other half of the article - fudging absolute positioning in IE6.

So what is absolute positioning?

You can position the content of your web page in a number of different ways. Strictly speaking, this isn't anything to do with HTML it's part of the CSS2 specification. CSS2 includes a position style and this may have one of 4 values (or inherit):

position: static | relative | absolute | fixed | inherit;

position:static is the default option and is the one most often used. It was also the only way pages could be styled under CSS1. Blocks of text (or other pieces of content) are set out in rows one below another.

The text uses up the full width of whatever space is available. The block of text grows downwards so as to be big enough to hold all the text. This is not dissimilar to the way type was 'set' by print workers, in the days before computers. This is referred to in the W3C recommendations as the 'normal flow'.

It is possible to take some items out of this 'normal flow' using the float:left or float:right options. However, this only allows for a limited range of effects.

position:relative position takes the block out of the 'normal flow'. Although space is still kept in the main body of the document - that it would have occupied. It appears 'on top' of the main text and offset by specified amounts from the position it would have occupied. The location of the element in the HTML acts as an anchor point and the block is displayed relative to this point.

This mode can be used, to create simple popups. It can also be used, to get a block of text to overlay another.

In position:absolute mode, the box is again taken out of the 'normal flow'. It gets positioned 'on-top' of the normal flow and is anchored to it's absolute parent. The absolute parent is the block above it that is also absolutely positioned (other blocks are ignored). If there is no absolute position parent, then it gets anchored to the containing window. You can position the block relative to the edges of it's parent using the left,top,right,bottom styles.

position: fixed is similar to absolute. However, a fixed box is fixed to the browser window and not to a containing block. If a page is short enough, to not have scrollbars then fixed and absolute would look the same.

Example 1 shows a page containing both static and absolute positioned text. To understand what is happening resize the browser window. Grab a corner of the browser window and drag it around. Note, how some boxes stay fixed in size, others grow/shrink as you resize.

Of course, if you are using IE6 this won't work properly, try a different browser, or have a look at Example 2. These examples don't look very pretty. In a real world web project, you probably wouldn't want to combine static and absolute in this way.

Carpets or wooden flooring?

If all that seems rather confusing try my flooring analogy!

static mode is similar to the way you might lay wooden floorboards. You start in the top-left corner of the room. You lay one plank, then you lay the next, extending over to the right. If a plank is longer than the available space, you cut it to fit. The offcut can be used to start the next row. (Things gets slightly more complicated if the planks are of different thicknesses.)

absolute mode is different. absolute mode is like putting down carpets. You can have a block with specified width and height (like a rug). You can then position it relative to left, right, top or bottom edges of the window/room. You can position additional 'rugs' beside, separate from or overlapping the first one.

As well as fixed size rugs, you can also put down 'made-to-measure' or 'cut-to-size' carpet. The carpet then covers the entire area, up to, whatever, margins you specify around the edges.

What's so great about that?

Well I like it! However not that many web-sites use it, so perhaps I'm just odd. Or perhaps it's because I am a software developer rather than a web designer. Anyone who has used any of the graphical programming tools like Visual Studio or Borland's Delphi, has had this kind of control over their program's layout for well over a decade. Compared to that, the web seems rather limited.

For simple static web pages the advantages of absolute mode are probably fairly small. In fact, one could argue that it breaks the web page metaphor and so should be avoided unless it adds something useful to the way the user experiences the site.

On the other hand, people wanted this sort of facility very early on. Which is why frames were invented. position:absolute allows you to do everything that could be done in frames - but without any of the down-side. In these days of Web 2.0 and Ajax, where web sites are becoming more like software applications, position:absolute is going to be much more useful.

So why isn't everyone using it?

Short Answer :- Microsoft.

OK slightly longer answer. This technique only works in browsers that fully support position:absolute. And that doesn't include IE6. IE6 half supports absolute positioning. You can set the top-left corner and the width and the height but, you can't reliably set the bottom-right corner. Hence the short answer. However, with IE7, Microsft have provided full support for both absolute and fixed modes. The problem is what to do about the trailing edge of IE6 users.

Another issue, is access from mobile devices. position:absolute might not be supported. Even if it is, the small screen of a mobile device might suggest a different solution. Fortunately, because this is a CSS technique, it may be possible to cater for mobile devices by simply switching the style-sheet.

More CSS

If you start to use absolute positioning then you will probably want to make extensive use of some other CSS styles. top, left, width and height will be familiar.

position: absolute;
left: 12px;
top: 12px;
width: 250px;
height: 250px;

Now you can also position a block from the bottom or from the right. Typically you will set top and bottom and leave height unset. Alternatively, set height and then set only one of top and bottom.

div#top {
// top area entire screen except for fixed bottom area - with 12px border
position: absolute;
overflow: auto;
left: 12px;
right: 12px;
top: 12px;
bottom: 212px;
}
div#bottom {
// bottom area fixed;
position: absolute;
overflow: hidden;
left: 0px;
right: 0px;
bottom: 0px;
height: 200px;

background-color: #CCC;
}

Similarly for left, right and width. You only need to set two out of three.

overflow: visible | hidden | scroll | auto;

overflow determines what happens if the content requires more space than it's defined size. This matters once you start fixing the sizes of blocks. Content that renders outside of the block can be visible or it can be hidden. Alternatively, scrollbars can be shown permanently using scroll or only when required with auto.

Other styles than now come into play are clip and z-index

Combining static and absolute modes

The examples given earlier looked pretty awful. They simply combined static and absolute modes without any real thought. Real web pages will probably need to combine both modes but rather more carefully.

Most people will probably want to use absolute positioning in one of two ways. First option is to have a page that is predominantly static with just one or two blocks positioned differently. The second option would be to create an overall page structure using absolute positioned blocks. These blocks would then contain the main content of the page using static positioning.

The first way might be used to have certain blocks moved from their position in the article to become sidebars; or using some Javascript to become popups. absolute mode is only one possible way of doing this. For some uses, fixed or relative might work better. You can also use more traditional techniques, using float and clear to move blocks to either left or right. Example 3 uses absolute position to move two paragraphs from the main text and into the margin at the right.

The second approach might typically be used where your web page was more like an application than a simple text document. The top-level blocks in the document would divide the browser window up into sections. You could then place content or controls on these blocks. In the past, this would be done using frames (deprecated) or forcing tables to work.

Example 4 illustrates this by dividing the page up into toolbars at top and bottom, an area for a treeview to the left and a scrollable content area filling the main part of the window. This example puts borders round each block to make it look a bit like a windows application. But this isn't compulsory. You could use any formatting supported by CSS for these blocks.

Summary

Absolute positioning probably isn't a good idea for everyone. People have become used to the way web pages tend to work, i.e. position:static. On a simple static web-site, it might be better t ostick with what people have grown used to

However, for any situation, where in the past, designers might have considered frames, or for a situation where a web-site is working in a similar way to a desktop application, position:absolute just might be a better option.