Interesante artículo, con su página de demostración, que explica qué es y como funciona la propiedad "z-index" en el CSS. Según el artículo, estas son las reglas de oro aplicables a esta propiedad:

• 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.

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.

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

Artículo completo: http://tjkdesign.com/
Demo: Understanding z-index