The Position Property

The Position Property

At the heart of CSS-based layouts is the position property. The position property determines the reference point for the positioning of each element box.

Let's look at what this means.

There are four values for the position property: static, absolute, fixed, and relative. static is the default. These terms didn't seem to map to what they actually do when I first encountered them; to help you avoid puzzling over what each does, let's take a quick look at each using a simple example with four paragraphs. In each case, I will leave paragraphs 1, 2, and 4 in the default static positioning and alter the property value of paragraph 3. I have deleted the class specialpara for the third paragraph in the markup (not shown), so I can change its position property without affecting the other paragraphs.

Static Positioning

First, let's see our four paragraphs all with the default position of static (Figure 4.13).

With static positioning, each element is simply laid out one after the other, so the paragraphs appear one under the next, with their default margin settings creating the space between them.

To break away from this sequential layout of elements provided by the default static positioning, you must change a box's positioning property to one of the three other values.

Relative Positioning

Let's set the third paragraph to the relative position. You can move the third paragraph with respect to its default position using the properties top, left, bottom, and right. Normally, providing values for just top and left produces the result you want. In this example

p#specialpara {position:relative; top:30px; left:20px;}

produces the results in Figure 4.14.

Now the top of your paragraph is moved down by 30 pixels and left by 20 pixels. However, as you have noticed, although the element moves relative to its original position, nothing else changes; the space occupied by the original static element is retained as is the positioning of the other elements.

The lesson here is that if you move an element in this way, you must allow space for it. In the example shown in Figure 4.14 above, you might take the next step of adding a margin-top value of 30 pixels or greater to the fourth paragraph to move it down; this prevents it from being overlapped by the repositioned third paragraph.

Absolute Positioning

Absolute positioning is whole different animal from static and relative, since this type of positioning takes an element entirely out of the flow of the document. Let's modify the code you used for relative positioning by changing relative to absolute

p#specialpara {position:absolute; top:30px; left:20px;}

Figure 4.15 shows the results.

In Figure 4.15, you can see that the space previously occupied by the element is gone. The absolutely positioned element has become entirely independent of the surrounding elements in the markup, and it is now positioned with respect to the top-level element, body. And this brings us neatly to the important concept of positioning context, which is a recurring subject in the rest of this chapter.

Let's start thinking about this concept by saying that the default positioning context of an absolutely positioned element is the body element. As Figure 4.15 shows, the offset provided by the top and left values moves the element with respect to the body elementthe top ancestor container in our markup hierarchynot with respect to the element's default position, as is the case with relative.

Because the absolutely positioned element's positioning context is body, the element moves when the page is scrolled to retain its relationship to the body element, which also moves when the page scrolls.

Before we see how we can use a different element than body as the positioning context for an absolutely positioned element, let's cover the last of the four positioning propertiesfixed positioning.

Fixed Positioning

Fixed positioning is similar to absolute positioning except that the element's positioning context is the viewport (the browser window, or the screen of a handheld device, for example), so the element does not move when the page is scrolled. Figures 4.16 and 4.17 show the effect of fixed positioning.

This "nailed-to-the-browser" effect enables you to simulate the effect of now-deprecated frames. For example, you can create a navigation element that stays put when the page scrolls without all the headaches of managing multiple documents in a frameset. However, position:fixed does not work in Internet Explorer for Windows. You can find a neat workaround to make fixed positioning work in Internet Explorer for Windows at TagSoup.com (http://devnull.tagsoup.com/fixed).

Positioning Context

Because positioning context is such an important concept to grasp if you want to escape from table-based layouts, some more explanation is useful. Put simply, contextual positioning means that when you move an element using the properties top, left, right, or bottom, you are moving that element with respect to another element; that other element is known as its positioning context. As you saw in "Absolute Positioning" earlier, the positioning context of an absolutely positioned element is body; that is, unless you change it.

body is the containing element of all other elements in your markup, but you can use any ancestor element as the positioning context of another element by changing the ancestor's position value to relative.

With this markup

<body>
<div id="outer">The outer div
<div id="inner">The inner div</div>
</div>
</body>

if you set the inner div's position property to absolute, it is positioned relative to body, because body is the default positioning context. Setting the top and left properties of the inner div moves it with respect to body, as you saw in Figure 4.15.

If you then set the position property of the outer div to relative, the positioning context of the inner div is the outer div. Setting the top and left properties of the inner div moves it with respect to the outer div. If you then set the left and top position properties of the outer div to anything other than zero, the inner div also moves to maintain its positioning relationship.

This ability to set the positioning context of any element, in combination with floating and clearing (coming up next), gives you the control you need to organize your markup into a multicolumn page layout.