HTML and CSS Reference
In-Depth Information
Figure 14.28
The paragraph is positioned relative to the
div
style.
The last type of position sets the precedence of a stack of overlapping elements. The
absolute position properties include three coordinates:
x
,
y,
and
z
, where
x
is the left side
of an object,
y
is the right side, and
z
is the value of the stacking position. If you have
three containers layered on top of each other, the
z
position of the bottom layer is 0; the
next layer, 1; and the top layer in the stack is layer 2. In the next section, JavaScript will
allow us to move these objects around, rearranging the stacking order dynamically, by
manipulating the
z
-position.
EXAMPLE
14.26
<html>
<head><title>layers</title></head>
<body bgcolor="lightgreen">
1
<span style="position: absolute;
z-index:0;
background-color: red; width: 200;height:250;
top: 50px; left:160px;"></span>
2
<span style="position: absolute;
z-index:1
;
background-color:yellow; width: 90;height:300;
top: 20px; left:210px;"></span>
3
<span style="position: absolute;
z-index:2
;
background-color: blue; width: 250;height:100;
top: 125px; left:134px;"></span>
Continues
