HTML and CSS Reference
In-Depth Information
Now the result is as expected: The stacking order of the elements is
reversed; the grey box overlaps the blue box, and the blue box overlaps the
gold.
Syntax
The
z-index
property can a
"
ect the stack order of both block-level and
inline elements, and is declared by a positive or negative integer value, or a
value of
auto
. A value of
auto
gives the element the same stack order as
its parent.
Here is the CSS code for the third example above, where the
z-index
property is applied correctly:
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 9999;
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 500;
}
#gold_box {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
