The Z-Index Property


Positioning elements frequently causes them to overlap and, in fact, the possibility of having elements overlap is an important reason for using positioning in the first place. The normal rule is that elements that come later in the source document are on top of earlier elements. But, as we saw in the example with the star (refer to Figure 9.2), that is not always what we want. That example therefore used the z-index property to explicitly put the image behind its containing block. Figure 9.7 shows an example.

Figure 9.7. The effect of z-index: a3 has the highest z-index and is on top; a4 has the lowest z-index and is behind the others.


 <STYLE>   DIV {position: absolute; border: solid;     width: 5em; height: 5em; background: silver;     text-align: right}   .a1 {top: 1em; left: 1em; z-endex: 3}   .a2 {top: 2em; left: 3em; z-index: 2}   .a3 {top: 3em; left: 2em; z-index: 4}   .a4 {top: 4em; left: 4em; z-index: 1} </STYLE> <DIV ><P>a1</DIV> <DIV ><P>a2</DIV> <DIV ><P>a3</DIV> <DIV ><P>a4</DIV> 

Name:

z-index

Value:

auto | <integer>

Initial:

auto

Applies to:

positioned elements

Inherited:

no

Percentages:

N/A


A negative value means that the element will be behind its containing block, and a value of zero or higher means it will be in front. auto is the same as zero (but see the following).

If two elements have the same containing block and the same z-index, the element that comes later in the source will be in front of the earlier element.

The value auto has an effect when containing blocks are nested. If an element that is a containing block for some other elements has a z-index of auto, it means that the z-index of the elements inside this block isn't relative to this containing block, but to the nearest enclosing containing block that doesn't have auto for its value. Thus, if you leave the z-index of all containing blocks as auto, all z-indexes will be relative to the root element, no matter how deeply nested the elements are.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net