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.
Explicitly sets the value of this property to that of the parent.
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
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
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,
- SELECT lists do not obey the normal z-index stacking order.
Nothing can be placed "on top of" a SELECT list unless it is
another SELECT list with a higher z-index. Other elements are
always rendered below SELECT lists, even if they are given a
higher z-index value than the SELECT. (IE4 has this behavior too,
but it can't even render other SELECT lists properly with
- Beginning in 5.5 Beta 1, frames and iframes can now participate
in z-index ordering. In previous versions, these elements were
always on top of all other content in the z-index world.
- 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.
- Negative values are not allowed for the 'z-index' property
in these versions - if any z-index values ARE
negative, they are placed on the TOP of the z-index stack,
in document order.