5.4. CSS Positioning Basics

The box model we've been examining so far in this chapter applies within groups of content. Generally, you use a <div> tag to group together collections of related content and to assign CSS styles to such a group.

But CSS Positioning (CSS-P) involves more than working with individual groups of related information. The connections between groups of content on an HTML page are equally important in determining the layout of the page. The primary CSS property involved in these connections is the position property.

The position property takes a single constant value. The value determines how the block is positioned on the page. The two most frequently used values for the position property are absolute and relative. Another value, static, is the default value, and is seldom used in CSS rules. A fourth value, fixed, is not supported by IE on Windows at all, which unfortunately means it's almost unusable in practical sites. Refer to Appendix B, for complete details on these more esoteric settings.

5.4.1. Absolute, Relative, and Positioning Contexts

Positioning can be confusing in CSS because the coordinate system within which a block is placed depends on the positioning context of the block. There's no universal set of coordinates to guide that placement, even when the absolute value is assigned to the position property. Each time a block is positioned on the page (with a position setting other than static), it creates a new positioning context for its descendants, in which the upper left corner of its content area has the coordinates (0,0). So, if you use CSS to position an element that is within the block, its position will be calculated relative to that new coordinate system—its positioning context.

The best way to understand this concept is to look at a few simple, interrelated examples. I'll start with a blank page. In this context, the upper left corner of the client area (also referred to in modern Web design parlance as the "document") is where the initial (0,0) coordinates are located. In that context, place a simple bit of text in a div (which uses a style sheet rule associated with the class bigTitle, to make it more readable) as shown in Figure 5-18.

Here's the HTML fragment that produces the result shown in Figure 5-18. The CSS properties top and left are used to position the div on the page.

<div class="bigTitle"
  style="position:absolute; left:125px; top:75px;">
  This is the first line of text being positioned.
</div>

Now put a second div completely inside the first one, as shown here:

<div class="bigTitle"
  style="position:absolute; left:125px; top:75px;">
  This is the first line of text being positioned.
  <div class="bigTitle"
    style="position:absolute; left:25px; top:30px;">
    This is a second line.
  </div>
</div>

The result is shown in Figure 5-19. Notice that the second line of text is indented 25 pixels from the left of the first line of text, because that first line sets the positioning context for the second. Notice, too, that its font size is huge. Why? Take a look at the style rule for the bigTitle class and you'll understand:

.bigTitle {
  font-family: Arial, Verdana, sans-serif;
  font-size: 2em;
  font-weight: bold;
}

As the second div is a child of the first, its font size is calculated relative to that of the first div. The style rule defines the font as being of size 2 ems, which instructs the browser to render the text at twice the size it would otherwise be. When that 2 em rule is applied to the first line, its size is doubled. But when it is applied to the second line, the font size of the first line is doubled to calculate that of the second.

I can correct this by using an absolute font size constant:

.bigTitle {
  font-family: Arial, Verdana, sans-serif;
  font-size: large;
  font-weight: bold;
}

The two divs should now share the same font size.

The page now has two div elements, one nested inside the other. Both use absolute positioning. Now I'll add a third element, this time a span element that will be contained in the second div block. Using relative positioning, the HTML turns out to look like this:

<div class="bigTitle"
     style="position:absolute; left:125px; top:75px;">
  This is the first line of text being positioned.
  <div class="bigTitle"
       style="position:absolute; left:25px; top:30px;">
    This is<span style="position:relative; left:10px;
top:30px;">an example of</span> a second line.
  </div>
</div>

The result of this bit of HTML can be seen in Figure 5-20. Notice that the words "an example of," which are contained in the span, appear below, and slightly to the right of their original position. Relative positioning is always based on the positioned element's original position on the page. In other words, the positioning context of an element that uses relative positioning is provided by its default position. In this example, the span is positioned below and to the right of where it would appear in the line if the positioning were removed, as it is in Figure 5-21.

In summary, the basic rules that determine the positioning context for an element when we're using the CSS position property are: