Stacking Objects (3D Positioning)

Although the screen is a two-dimensional area, elements that are positioned can be given a third dimension: a stacking order in relationship to one another.

Positioned elements are assigned stacking numbers automatically, starting with 0 and continuing incrementally with 1, 2, 3, and so on, in the order in which the elements appear in the HTML and relative to their parents and siblings. Elements with higher numbers appear above those with lower numbers. This system is called the z-index (Table 7.4). An element's z-index number is a value that shows its 3D relationship to other elements in the document or parent element.

Table 7.4. Z-Index Values
VALUE	COMPATIBILITY
<number>	IE4, FF1, S1, O3.5, CSS2
auto	IE4, FF1, S1, O3.5, CSS2

If the content of elements overlap each other, the element with a higher number in the stacking order appears over the element that has a lower number.

You can override the natural order of the z-index (Figures 7.7 and 7.8) by setting a value for the z-index property.

Figure 7.7. Without the z-index set, the objects keep the natural stacking order. Notice that Object 1 is now underneath everything else, because its natural z-index is `0`.

Figure 7.8. With the z-index set in the code, the stacking order is changed. Notice that although Object 1 should be on the bottom of the stack, its z-index has been set to 3, so it appears on top.

To define an element's z-index:

position: absolute;

To layer an element in the window, you have to define the position property (Code 7.4).

Code 7.4. In the code, positioned elements appear stacked on top of each other based on their order in the HTML code. Using the z-index property, you can override that natural stacking order to put whatever you want on top.

[View full width]

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Stacking Elements On Top of Each Other</title>         <style type="text/css" media="screen"> body {      font-size: 1.2em;      font-family: Georgia, "Times New Roman", times, serif;      color: #000000;      background-color: #fff;      margin: 8px; } img {      margin-bottom: 4px;      display: block; } .dropBox {      padding: 4px;      background-color: #FFFFFF;      border: 2px solid #f00; } #object1 {      position: absolute;      z-index: 3;      top: 285px;      left: 315px; } #object2 {     position: absolute;     z-index: 2;     top: 210px;     left: 210px; } #object3 {     position: absolute;     z-index: 1;     top: 105px;     left: 105px } #object4 {     position: absolute;     z-index: 0;     top: 5px;     left: 5px; } </style> </head> <body> <div  > <img src="/books/3/292/1/html/2/alice22a.gif" height="220" width="150" alt="Alice in Wonderland" /> Object 1</div> <div  > <img src="/books/3/292/1/html/2/alice15a.gif" height="264" width="200" alt="Alice in Wonderland" /> Object 2</div> <div  > <img src="/books/3/292/1/html/2/alice28a.gif" height="336" width="250" alt="Alice in Wonderland" /> Object 3</div> <div  > <img src="/books/3/292/1/html/2/alice30a.gif" height="408" width="300" alt="Alice in Wonderland" /> Object 4</div> </body> </html>

(See "Setting the Positioning Type" earlier in this chapter for more information.)

z-index:

Type the z-index property name, followed by a colon (:), in the same declaration block.

3;

Now type a positive or negative number (no decimals allowed), or 0. This step sets the element's z-index in relation to its siblings, where 0 is on the same level.

Alternatively, type auto to allow the browser to determine the element's z-index order.

Tips

Using a negative number for the z-index causes an element to be stacked that many levels below its parent instead of above.
You can change the stacking order of elements using JavaScript (see "Moving Objects in 3D" in Chapter 16).

Table 7.4. Z-Index Values

Figure 7.7. Without the z-index set, the objects keep the natural stacking order. Notice that Object 1 is now underneath everything else, because its natural z-index is 0.

Figure 7.8. With the z-index set in the code, the stacking order is changed. Notice that although Object 1 should be on the bottom of the stack, its z-index has been set to 3, so it appears on top.

Code 7.4. In the code, positioned elements appear stacked on top of each other based on their order in the HTML code. Using the z-index property, you can override that natural stacking order to put whatever you want on top.

Figure 7.7. Without the z-index set, the objects keep the natural stacking order. Notice that Object 1 is now underneath everything else, because its natural z-index is `0`.