• Choose a category
• All
• Classic-Fiction

height: 100px;

position: absolute;

left: 0px;

top: 0px;

margin: 0px;

}

#blackBox {

background-color: black;

width: 100px;

height: 100px;

position: absolute;

left: 50px;

top: 50px;

margin: 0px;

}

So, why do I care if the boxes overlap? Well, you might not care, but the interesting part is this: You can have much more precise control over where elements live and what size they are. You can even override the browser’s normal tendency to keep elements from overlapping, which gives you some interesting options.

Making absolute positioning work

A few new parts of CSS allow this more direct control of the size and position of these elements. Here’s the CSS for one of the boxes:

#blueBox {

background-color: blue;

width: 100px;

height: 100px;

position: absolute;

left: 0px;

top: 0px;

margin: 0px;

}

1. Set the position attribute to absolute.

Absolute positioning can be used to determine exactly (more or less) where the element will be placed on the screen:

position: absolute;

2. Specify a left position in the CSS.

After you determine that an element will have absolute position, it’s removed from the normal flow, so you’re obligated to fix its position. The left attribute determines where the left edge of the element will go. This can be specified with any of the measurement units, but it’s typically measured in pixels:

left: 0px;

3. Specify a top position with CSS.

The top attribute indicates where the top of the element will go. Again, this is usually specified in pixels:

top: 0px;

4. Use the height and width attributes to determine the size.

Normally, when you specify a position, you also want to determine the size:

width: 100px;

height: 100px;

5. Set the margins to 0.

When you’re using absolute positioning, you’re exercising quite a bit of control. Because browsers don’t treat margins identically, you’re better off setting margins to 0 and controlling the spacing between elements manually:

margin: 0px;

Generally, you use absolute positioning only on named elements, rather than classes or general element types. For example, you won’t want all the paragraphs on a page to have the same size and position, or you couldn’t see them all. Absolute positioning works on only one element at a time.

Managing z-index

When you use absolute positioning, you can determine exactly where things are placed, so it’s possible for them to overlap. By default, elements described later in HTML are positioned on top of elements described earlier. This is why the black box appears over the top of the blue box in Figure 4-2.

Handling depth

You can use a special CSS attribute called z-index to change this default behavior. The z-axis refers to how close an element appears to be to the viewer. Figure 4-3 demonstrates how this works.

Figure 4-3: The z-index allows you to change which elements appear closer to the user.

The z-index attribute requires a numeric value. Higher numbers mean the element is closer to the user (or on top). Any value for z-index places the element higher than elements with the default z-index. This can be very useful when you have elements that you want to appear over the top of other elements (for example, menus that temporarily appear on top of other text).

Here’s the code illustrating the z-index effect:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>