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

Custom Search