HTML and CSS Reference
In-Depth Information
The
z-index
values need not be sequential, although they must be in-
tegers, so we could have used the values
99
and
2
, respectively, and
gotten the same result in the previous example. And you need not spe-
cify a
z-index
for all the layers that occupy the same display spaceyou
need specify it only for those that you want to raise or lower in relation
to other layers. However, be aware that the order of precedence may
get confusing if you don't
z-index
all related layers.
For instance, what order of precedence by color would you predict when
Netscape 4 renders the following sequence of layers?
<layer left=0 top=0 z-index=3>
<h1><font color=red>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=4 top=4>
<h1><font color=green>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=8 top=8 z-index=2>
<h1><font color=blue>Introduction to Kumquat Lore</font></h1>
</layer>
Give yourself a star if you said that the green header goes on top of the
red header, which goes on top of the blue header. Why? Because the
red header is of lower priority than the green header based on order of
appearance, and we forced the blue layer below the red one by giving
it a lower
z-index
value. Netscape 4 displays
z-index
ed layers according
to their given order and non-
z-index
ed layers according to their order of
appearance in the document. Precedence based on order of appearance
also applies for layers that have the same
z-index
value. If you nest
layers, all the layers at the same nesting level are ordered according
to their
z-index
attributes. This group is then ordered as a single lay-
er among all the layers at the containing level. In short, layers nested
within a layer cannot be interleaved among layers at a different level.
For example, consider these nested layers with their content and end
tags omitted for clarity (indentation indicates nest level):
