Atributo z-index de CSS

Definición y uso

El atributo z-index establece el orden de apilamiento del elemento. Los elementos con un orden de apilamiento más alto siempre estarán delante de los elementos con un orden de apilamiento más bajo.

Nota:Los elementos pueden tener valores de atributo z-index negativos.

Nota:El atributo z-index solo funciona en elementos de posicionamiento (por ejemplo, position:absolute;)

Explicación

Esta propiedad establece la posición del elemento a lo largo del eje z, donde el eje z se define como el eje que se extiende verticalmente hasta la zona de visualización. Si es un número positivo, está más cerca del usuario, y si es negativo, está más lejos.

Véase también:

Tutoriales CSS:Posicionamiento CSS

Manual de referencia de HTML DOM:Atributo zIndex

Ejemplo

Establecer el z-index de la imagen:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Prueba por ti mismo

Sintaxis de CSS

z-index: auto|number|initial|inherit;

Valor del atributo

Valor Descripción
auto Predeterminado. El orden de apilamiento es igual al del elemento padre.
number Establece el orden de apilamiento del elemento.
inherit Se debe especificar que el valor de la propiedad z-index se hereda del elemento padre.

Detalles técnicos

Valor predeterminado: auto
Herencia: no
Versión: CSS2
Sintaxis de JavaScript: object.style.zIndex="1"

Más ejemplos

Z-index
Z-index se puede usar para ubicar un elemento después de otro.
Z-index
El elemento en el ejemplo anterior ha cambiado el Z-index.

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente esa propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0