HTML and CSS Reference
In-Depth Information
EXAMPLE
14.26 (
CONTINUED
)
4
<span style="position: absolute;
z-index:3
;
background-color: white; width: 50;height:50;
top: 140px; left:230px;"></span>
</body>
</html>
EXPLANATION
1
A
span style
is used to create a red rectangle, size 200 pixels × 250 pixels, in the
top, left corner of the screen. A
z-index
of 0 means that this rectangle will be the
bottom layer in a stack.
2
A
span style
is used to create a yellow rectangle, size 90 pixels × 300 pixels, posi-
tioned above the red rectangle,
z-index
of 1, or on top of it in the stacking order.
3
A
span style
is used to create a blue rectangle, size 250 pixels × 100 pixels, posi-
tioned above the yellow rectangle,
z-index
of 2, or on top of it in the stacking order.
4
A
span style
is used to create a white square, size 50 pixels × 50 pixels, positioned
above the blue rectangle,
z-index
of 3, or on top of it in the stacking order. See Fig-
ure 14.29.
Figure 14.29
Using the z-index for overlapping elements.