HTML and CSS Reference
In-Depth Information
The boxes above are given di
"
erent background and border colors, and the
last two are indented and given negative top margins so you can see the
natural stacking order. The grey box appears first in the markup, the blue
box second, and the gold box third. The applied negative margins clearly
demonstrate this fact. These elements do not have
z-index
values set;
their stacking order is the natural, or default, order. The overlaps that occur
are due to the negative margins.
Why Does it Cause Confusion?
Although
z-index
is not a di
!
cult property to understand, due to false
assumptions it can cause confusion for beginning developers. This
confusion occurs because
z-index
will only work on an element whose
position
property has been explicitly set to
absolute, fixed
, or
relative
.
To demonstrate that
z-index
only works on positioned elements, here are
the same three boxes with
z-index
values applied to attempt to reverse
their stacking order:
