Positioning of elements in CSS occurs in three dimensions, not
just two. The third dimension is perpendicular to the screen, giving
the screen a sense of depth. Elements can be overlapped, with "higher",
or "closer" elements obscuring elements that are "lower" or "farther
away" (element transparency becomes an important issue with this
capability.) The placement of elements along this third 'z-axis' is exactly
what this property controls.
Each element's rendering box is automatically assigned an integer z-index
stacking level based on its context in the document. Boxes with greater
z-axis numbers will appear in front of boxes with lower z-axis numbers ('0'
and negative numbers are allowed.)
Explicitly setting the 'z-index' property for an element box not only sets its
z-position relative to other element boxes in its current context, it also
initiates a new stacking context hierarchy, in which the current
element box and its child elements partake.
If two or more boxes have the same stacking level within the same context,
they are rendered back to front in the order of the document tree. If no
'z-index' property is set for an element box, it inherits the stacking level
of its parent element box.
Allowed Values
inherit
CSS2
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
auto
CSS2 | IE4
Type: Explicit
Description:
The stack level of the current element's box in the current context is
the same as that of its parent's. A new local stacking context is not
created.
[integer]
CSS2 | IE4
| N4
Type: Explicit
Description:
This indicates the stack level of the current element's box in the
current context. A new local stacking context is created by the current
element, with its stack level being 0. Positive and negative integers
are allowed.
Before its inclusion in CSS2, this property was first proposed in the W3C
Working Draft "Positioning HTML Elements with Cascading Style Sheets" (8/19/97,
http://www.w3.org/TR/WD-positioning)
Browser Peculiarities
Netscape
4.x:
- Form elements are always rendered on top of absolutely or
relatively positioned elements, regardless of where they are
located in the document tree or any 'z-index' value specified.