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.