Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Controlling Stacking 305

11

Output ▼

So, how do I cause the first element to overlap the second? Because I’ve assigned the
first element the relative positioning scheme (even though I haven’t specified a posi-
tion), I can assign it a z-index of 1 (or higher) to move it into a stacking layer above the
second paragraph. The new style sheet for the page, which appears in Figure 11.11 , is as
follows:

Input ▼

#one {
position: relative;
z-index: 1;
width: 50%;
padding: 15px;
background-color: #ffc;
}

#two {
position: absolute ;
top: 15%;
left: 15%;
padding: 15px;
width: 50%;
background-color: #060;
col or: #fff;
}

FIGURE 11.10
Two normally
stacked elements.