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.
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 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>
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 .
Search WWH ::

Custom Search