z-index

For a positioned box, the 'z-index' property specifies:

Values have the following meanings:

integer
This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is '0'.
auto
The stack level of the generated box in the current stacking context is the same as its parent's box. The box does not establish a new local stacking context.
The golden rules:

If there is no z-index specified, elements are stacked in the following order (from back to front):

  1. boxes in the normal flow, according to the sequence in the source code,
  2. floating boxes,
  3. positioned boxes, according to the sequence in the source code.

In stacking context talk, the expression "in front of" means closer to the user as the user faces the screen.

A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.
If you are using 3 digits z-index values, you are doing it wrong.

In IE 6/7, any relatively positioned element that has haslayout set to true establishes a stacking context.

One may visualize this IE bug in the playground by setting [A] and [B] to position:relative, while [a] gets position:relative; z-index:1. Now, dragging [A] under [B] hides [a] - in Internet Explorer, that is. Any positioned child with a z-index is caught by this wrong stacking context of its parent.

z-index tool