HTML and CSS Reference
In-Depth Information
Figure 11-10.
The form is on the opposite side in older versions of Internet Explorer
Because the page is the containing block for older versions of IE, leaving the
right
and
bottom
offsets
unchanged would position the form at the bottom-right of the page. However, you can exploit the position the
form would normally occupy on the left of its parent element, and then offset it from the top of the page. This
results in the form being on the opposite side of the header, and it scrolls with the rest of the page, but it's an
acceptable compromise.
Setting the Stacking Order with z-index
Positioned elements are displayed on an independent layer in front of other elements. As the examples in
the preceding section show, this makes it possible to overlap nonpositioned elements. When two positioned
elements overlap, the last one in the underlying HTML is displayed in front.
To show what this means, z-index1.html contains two relatively positioned
<div>
elements with the IDs
verse1
and
verse2
. The
verse2<div>
comes after
verse1
in the HTML markup. The styles that position them
look like this:
#verse1, #verse2 {
position: relative;
padding: 20px;
border: 2px black solid;
width: 280px;
}
#verse1 {
top: 20px;
left: 30px;
background-color: #FF6;
}
#verse2 {
top: -10px;
left: 200px;
background-color: #6CF;
}
The effect of these styles is to move
verse1 20px
down from its normal position, and
verse2 10px
up. As
a result, the two
<div>
elements overlap each other. Because
verse2
comes after
verse1
in the HTML,
verse2
overlaps the bottom-right corner of
verse1
, as shown in Figure
11-11
.
