Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

There are no doubt situations in which you'd like to be able to carefully control the manner in which elements overlap each other on a web page. The z-index style property allows you to set the order of elements with respect to how they stack on top of each other. Although the name z-index might sound a little strange, it refers to the notion of a third dimension (Z) that points into the computer screen, in addition to the two dimensions (X and Y) that go across and down the screen. Another way to think of the z-index is the relative position of a single magazine within a stack of magazines. A magazine nearer the top of the stack has a higher z-index than a magazine lower in the stack. Similarly, an overlapped element with a higher z-index is displayed on top of an element with a lower z-index.

The z-index property is used to set a numeric value that indicates the relative z-index of a style rule. The number assigned to z-index has meaning only with respect to other style rules in a style sheet, which means that setting the z-index property for a single rule doesn't mean much. On the other hand, if you set z-index for several style rules that apply to overlapped elements, the elements with higher z-index values will appear on top of elements with lower z-index values.

Listing 14.4 contains another version of a style sheet for the Color Blocks sample page that has z-index settings to alter the natural overlap of elements.

Listing 14.4. The colors_z.css Style Sheet Alters the Z-index of Elements in the Color Blocks Sample Page

div { position:absolute; width:250px; height:100px; border:10px single black; color:black; text-align:center; } div.one { background-color:red; z-index:0; left:0px; top:0px; } div.two { background-color:green; z-index:3; left:75px; top:25px; } div.three { background-color:blue; z-index:2; left:150px; top:50px; } div.four { background-color:yellow; z-index:1; left:225px; top:75px; }

The only change in this code from what you saw in Listing 14.3 is the addition of the z-index property in each of the numbered div style classes. Notice that the first numbered div has a setting of 0, which should make it the lowest element in terms of the z-index, whereas the second div has the highest z-index. Figure 14.4 shows the Color Blocks page as displayed with this style sheet, which clearly shows how the z-index affects the displayed content.

The figure reveals how the z-index style property makes it possible to carefully control the overlap of elements.

Just to show how the z-index style property can impact any HTML content, check out Figure 14.5, which shows a page with images that overlap thanks to absolute positioning and the z-index property.

This figure reveals how it's possible to overlap just about any content on a page if you so choose.