HTML and CSS Reference
In-Depth Information
Figure 11-11.
The second <div> overlaps the first because of the order they appear in the HTML
However, you can control the stacking order of positioned elements by setting the
z-index
property, which
takes an integer as its value. The styles in z-index2.html set the
z-index
of
verse1
to 1 like this:
#verse1 {
top: 20px;
left: 30px;
background-color: #FF6;
z-index: 1;
}
No change is made to the
#verse2
styles, so its
z-index
is the default
auto
. An explicit value for
z-index
is
considered higher than
auto
, so the first
<div>
now overlaps the second one (see Figure
11-12
).
Figure 11-12.
Setting the z-index property on the first < div > brings it to the front
In z-index3.html, the
z-index
property is added to the
#verse2
style rule, and is set to
1
. This produces the
same result as Figure
11-11
. When overlapping positioned elements have the same
z-index
, the one that comes
last is displayed in front. This is the same as setting no
z-index
at all.
