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