HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 8.21
Two normally
stacked elements.
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 positioned it), 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 8.22, 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;
color: #fff;
}
