HTML and CSS Reference
In-Depth Information
The
z-index
property takes a positive or negative integer as its value, indicating the
stacking order. Elements with a higher value are in front of elements with a lower value, as
in the following example:
<img src="ace-of-hearts.png" style="
position: absolute;
left: 0;
top: 0;
z-index: 1;">
<img src="ace-of-spades.png" style="
position: absolute;
left: 100px;
top: 100px;
z-index: 0;">
In this example, shown in Figure
21-2
, the ace of hearts is layered on top of the ace of
spades because of its higher stacking order.
Figure 21-2.
Customized stacking order
