HTML and CSS [Electronic resources] نسخه متنی

Z-index

The z-index creates the dimensional axis upon which you can "stack" and overlap items. This comes in handy in positioning because you can use it to determine which boxes come to the foreground and which ones will flow behind upon browser resize. Other uses for the z-index relate mostly to DHTML, in which element boxes are scripted for dynamic purposes such as when creating animations or games.

Example 12-10 shows three boxes, each absolutely positioned to overlap one another and styled in such a way that you can visualize the stacking order.

Example 12-10. Z-index with positioned boxes

#box1 {
position: absolute;
top: 10px;
left: 10px;
background: #000;
width: 300px;
height: 200px;
z-index: 1;
}
#box2 {
position: absolute;
top: 20px;
left: 20px;
background: #999;
width: 300px;
height: 200px;
z-index: 2;
}
#box3 {
position: absolute;
top: 30px;
left: 30px;
background: #ccc;
width: 300px;
height: 200px;
z-index: 3;
}

You'll note that the higher the number is, the "closer" the box appears in the stack. So, a box with a z-index of 3 appears to be the closest to you in the stack (see Figure 12-16).