Z-Index

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 =

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

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

Internet Explorer

5.0+:
- 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 z-indexes assigned.)
5.5:
- 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.
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.
- 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.