CSS: la propiedad z-index

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

8 respuestas a «CSS: la propiedad z-index»

  1. tengo 2 div uno con z-index 1 y el otro z-index 2 ahora quiero que el div que tiene z-index 2 este centrado siempre ya sea que minimize o maximize la ventana de mi navegador.

  2. El problema sigue siendo explorer 6 y 7 cuando los elementos no estan en el mismo contenedor. ¿Conoces algún hack o solución para ello?

Los comentarios están cerrados.