Artículo obsoleto: He publicado una nueva versión con una explicación más clara y con algunos errores corregidos.

Actualizado 2009-03-02: Se añade comentario acerca de la peculiaridad de Internet Explorer con z-index.

La propiedad z-index sirve para especificar el orden de los elementos en el eje z, o dicho de otra forma, que elementos van encima de otros.

Solamente funciona cuando se ha definido en la misma regla la propiedad position, con los valores absolute o relative.

Valores de la propiedad z-index:

• auto: la posición asignada por defecto.
• numérico: en este caso el valor es un número entero, todo lo grande que se quiera, que podrá ser positivo o negativo.

Para que un elemento quede por encima de otro, el valor de su z-index ha de ser mayor.

Un ejemplo:

div#capa1 {position:relative;z-index:1;}
div#capa2 {position:absolute;z-index:3;}

En el ejemplo hay dos capas. Puesto que la segunda (div#capa2) tiene un valor de z-index mayor que la primera (div#capa1) será esa la que quede por encima.

Internet Explorer 6 y 7

Internet Explorer solo respeta la propiedad z-index si ambos elementos están bajo el mismo contenedor y al mismo nivel.

Enlaces relacionados

• W3C CSS Reference
• Understanding CSS z-index: Adding z-index (Mozilla Developer Center)
• CSS z-index property (W3Schools)