z-index

Support Key: [CSS2|CSS2.1] [IE4|N4|O4|S1]
Other Positioning Properties
top
right
bottom
left
vertical-align
overflow
overflow-x
overflow-y
text-overflow
clip
= Index DOT Css by Brian Wilson =
  Main Index | Property Index | CSS Support History | Browser History  



   Quick Statistics   
Default Value:
   auto
Applicable Elements:
Positioned Elements
Inherit From Parent:
No
Applicable Media:
Visual
HTML Equivalent:
<ilayer|layer z-index="N">
Official Docs:
CSS2: Sect. 9.9.1, CSS2.1: Sect 9.9.1
What is it?
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|CSS2.1] [N6|O5|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
auto
[CSS2|CSS2.1] [IE4|N4|O4|S1]
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|CSS2.1] [IE4|N4|O4|S1]
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.
Example
Ext/Doc: h2 { display: block; position: absolute;
top: 20px; right: 50px; bottom: 20px; left: 50px; z-index: 3 }
In-Line:  <h2 STYLE="display: block; position: absolute;
top: 20px; right: 50px; bottom: 20px; left: 50px; z-index: 3;">text</h2>
Notes Browser Peculiarities

Boring Copyright Stuff....