HTML and CSS Reference
In-Depth Information
In z-index4.html,
#verse1
has a
z-index
of
2
, and
#verse2
has a
z-index
of
1
. The higher value wins, so the
first
<div
>
is displayed in front, as in Figure
11-12
.
■
There's no need to use consecutive numbers for
z-index
. some designers use increments of 10 or 100 to
avoid renumbering if they need to add a new element later. The general rule is that the element with the higher
z-index
is displayed in front. However,
z-index
affects only positioned elements. Positioned elements always ap-
pear in front of nonpositioned ones if they overlap.
Tip
Understanding the Stacking Context
From time to time, pleas for help appear in online forums from designers who can't understand why a positioned
element won't come to the front no matter how high they set the
z-index
. A positioned element's containing
block not only determines where the offsets are calculated from, but it also establishes the
stacking context
,
which restricts how
z-index
is applied. Put simply, it doesn't matter how high you set an element's
z-index
, what
matters is the
z-index
of the containing block.
In stacking_context.html, two
<div>
elements have been nested inside the
verse1
and
verse2<div>
elements from the examples in the preceding section like this:
<div id="verse1">
<p>How doth the little crocodile. . . </p>
<div id="destination"><img src="images/destination.png" width="150" height="118"
alt="Great destination"></div>
</div>
<div id="verse2">
<p>How cheerfully he seems to grin. . . </p>
<div id="flower"><img src="images/flower2.png" width="80" height="60" alt="Flower"></div>
</div>
The styles for the nested
<div>
elements look like this:
#destination {
position: absolute;
left: 340px;
top: 0;
z-index: 5;
}
#flower {
position: absolute;
left: 200px;
top: -55px;
z-index: 2000;
}
The
flower<div>
has a
z-index
of
2000
. Yet—as Figure
11-13
shows—it's displayed behind the
destination<div>
, which has a
z-index
of only
5
.
