z-index

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

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.

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:

A box is at the same stack level as its parent’s unless it is given a different stack level through the z-index property.
z-index applies only to objects that have the position property set to relative, fixed or absolute.
Assigning an opacity value less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value.

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

boxes in the normal flow, according to the sequence in the source code,
floating boxes,
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.