Integrated Web Design: Position This! CSS Positioning Demystified

Date: Aug 6, 2004

Looking for the right position? Look no further. In this installment of Integrated Web Design, Molly Holzschlag teaches you all about positioning schemes. This article examines the four true positioning schemes in CSS, clarifies the confusion between absolute and relative positioning, and explains that although floats are often great for use in layouts, they should not be confused as an actual part of CSS positioning.

CSS positioning is far easier to understand than it first seems to be. While preparing for a recent CSS training session, I sent ahead a questionnaire to the attendees. Ninety percent of the responses pointed to confusion with understanding positioning schemes, especially the difference between relative and absolute positioning.

Fret no more! Positioning is pretty easy to understand once it's explained in clear terms. The confusion is partly due to the fact that it's not something that's clearly discussed in general forums, nor is it something that the specs make clear. The concepts appear to be abstract, but they're really not, as you'll soon find out.

Begin with Flow

The best way to gain an understanding of positioning is to begin with the concept of normal flow, which is the default behavior of a web browser. Each block level element is stacked on the next, with inline elements flowing into the available space.

Consider the XHTML document in Listing 1.

Listing 1 A sample XHTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Daddy Long Legs</title>
</head>

<body>

<p>It was a distressing time; and poor Jerusha Abbott, being the oldest orphan, 
had to bear the brunt of it. But this particular first Wednesday, like its 
predecessors, finally dragged itself to a close.</p>

<p>Jerusha escaped from the pantry where she had been making sandwiches for the 
asylum's guests, and turned upstairs to accomplish her regular work. Her 
special care was room F, where eleven little tots, from four to seven, occupied 
eleven little cots set in a row. </p>

<p>Jerusha assembled her charges, straightened their rumpled frocks, wiped their 
noses, and started them in an orderly and willing line towards the dining-room 
to engage themselves for a blessed half hour with bread and milk and prune pudding.</p>

</body>
</html>

I add a simple style rule just to outline the block elements for you:

p {border: 1px solid orange;}

You can then see the boxes generated by each paragraph (Figure 1).

Figure 1

This figure allows you to visualize my simple document as a series of blocks. These blocks all default left and stacked on top of each other because they are within the normal flow. If you resize your browser, the boxes will flow to fill out whatever space is available, but the boxes will be retained (Figure 2).

Figure 2

CSS positioning is based on the premise that a block is either in the normal flow or it's taken out of the normal flow via a positioning scheme.

NOTE

The first containing block in any document is the root element of that document, which in HTML and XHTML is the html element, of course. That html is the first block in a document is something many people miss, thinking that it begins at the body element. This thinking isn't illogical, but it's inaccurate and might be one of the reasons that positioning seems so confusing.

The Four Schemes

There are four positioning schemes in CSS positioning:

Static
Absolute
Relative
Fixed

All these themes have a specific relationship to normal flow.

Static Positioning

Static positioning is simply placing a box in the normal flow. Because static is the default behavior of an unpositioned box, using the declaration position: static; is comparable to the rule p {text-align: left;}. There's no need to apply a rule that mimics default behavior unless you are overriding another rule.

For this reason, you'll rarely see the static value in use, but it's good to know what it is.

Absolute Positioning

Absolute positioning absolutely positions a box within its containing block. You can then use any one or combination of left, top, right, and bottom properties to position the box.

The critical point is that an absolutely positioned box is always positioned to its containing block, not the browser itself.

NOTE

Absolutely positioned boxes are taken out of the normal flow, so they do not affect the layout of sibling boxes.

I'll now apply a style rule to one of the paragraphs in the document and pull it out of the normal flow using absolute positioning:

p#position {
    position: absolute;
    left: 10px;
    right: 300px;
    top: 10px;	
}

Figure 3 shows that the block is positioned 10 pixels to the left, 300 pixels to the right, and 10 pixels from the top of its containing block (which in this case is the html element). The box has now been pulled out of the flow and actually sits on top of the other boxes, which remain in the normal flow.

Figure 3

NOTE

Because no width has been assigned to any of the boxes, even the positioned box will move dynamically when the browser is resized. However, it will always retain its positioning. If you want, you can always add specific widths.

Consider the following example: I created a containing block called "main" to contain the content block, which in turn houses the content. I added style rules to position the content box absolutely within another absolutely positioned box (Listing 2).

Listing 2 Adding structural divisions and positioning them absolutely.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Daddy Long Legs</title>

<style type="text/css">

#main {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 500px;
    height: 350px;
    border: 2px solid green;
}

#content {
    position: absolute;
    left: 100px;
    top: 10px;	
    border: 1px solid red;
}

</style>

</head>

<body>

<div id="main">

<div id="content">
<p>It was a distressing time; and poor Jerusha Abbott, being the oldest orphan, 
had to bear the brunt of it. But this particular first Wednesday, like its 
predecessors, finally dragged itself to a close.</p>

<p>Jerusha escaped from the pantry where she had been making sandwiches for the 
asylum's guests, and turned upstairs to accomplish her regular work. Her 
special care was room F, where eleven little tots, from four to seven, occupied 
eleven little cots set in a row. </p>

<p>Jerusha assembled her charges, straightened their rumpled frocks, wiped their 
noses, and started them in an orderly and willing line towards the dining-room 
to engage themselves for a blessed half hour with bread and milk and prune pudding.</p>
</div>
</div>
</body>
</html>

Figure 4 shows that the containing block is positioned, and the content block is positioned in relation to the containing block, not the browser.

Figure 4

Relative Positioning

Relative positioning works differently. Instead of blocks being positioned to their containing block, blocks in relative positioning are positioned to the normal flow. The following CSS sets up the content division to be positioned relatively.

#main {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 500px;
    height: 350px;
    border: 2px solid green;
}
#content {
    position: relative;
    left: 100px;
    top: 10px;	
    border: 1px solid orange;
    padding: 10px;
}

Figure 5 shows that the content division disregards its containing block and is instead relating to the browser chrome.

Figure 5

And that's the main difference between absolute and relative! That's it—it's really that simple.

Fixed Positioning

Fixed positioning is calculated in the same way as absolute positioning with respect to containing blocks in that it pulls the positioned box out of the normal flow. In the case of fixed positioning, the fixed reference is the browser viewport.

A fixed block remains in place, no matter what else happens around it. So, if I set my containing block to be fixed, that block will be immovable, whereas anything else will either be positioned or in the normal flow.

#main {
    position: fixed;
    left: 10px;
    top: 5px;
    width: 500px;
    height: 350px;
    border: 2px solid green;
}

I removed the containing block and left the original paragraphs in the normal flow. As shown in Figure 6, as I resize my browser, the block remains fixed and does not flow with the browser resize.

Figure 6

CAUTION

Fixed positioning could be very useful but for the fact that it lacks support in Internet Explorer for Windows (all versions including the pervasive IE 6.0). So its use is limited to those situations in which you're optimizing for other browsers.

A Few Words About Floats

Floating is the process of taking a box and having it float to the left or right. The concept is exactly the same as aligning an image to the right and having text flow around it. In fact, floating in CSS was designed to allow us to do just that. The following will place an image to the right of the text, which will flow around it:

img {float: right;}

Because you can float any box, it appears as if this is a positioning scheme, but it's not. However, floating is often used along with positioning to create floating boxes within a design, so people are sometimes under the impression that floating is a positioning scheme.

Floating boxes are in the normal flow and therefore cannot be manipulated in the same way as positioned boxes. Although both are used to create layouts in contemporary CSS design, it is important to understand the difference.

Get Into Position!

With a clearer understanding of how positioning works, you can now begin to apply positioning in your design work. Depending on the target browsers you must support, you might determine that another approach is necessary, such as combining a light table for basic structure. However, if you are targeting contemporary CSS browsers, you can create entire designs based on positioning schemes.

Absolute and relative positioning can be used for a range of contemporary browsers, including Internet Explorer 5.x and later, Netscape 6.x, Mozilla, Opera, and Safari. Just be extra careful because box model problems in some browsers affect the way positioned boxes are interpreted. Therefore, you'll want to be sure to use HTML 4.01 Strict or any version of XHTML with proper DOCTYPEs to ensure DOCTYPE switching. You might also need to use some CSS hacks to ensure that your schemes work in IE 5.x browsers.

NOTE

Read more about DOCTYPE switching in Integrated Web Design: CSS Beyond the Retrofit. You can learn all about hacks in Integrated Web Design: Strategies for Long-Term CSS Hack Management.

So although it takes a deeper understanding of CSS to actually apply positioning well, the bottom line is that positioning can in fact be used with confidence in many scenarios.