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

Custom Search