Características z-index en CSS

La propiedad z-index en CSS determina el orden de los elementos posicionados en el eje Z.

Funciones z-index css

Valor inicial	`auto`
Aplicado a	Elementos posicionados.
Heredable	No
Móvil	Sí
Valor calculado	Como se especificó.

/* es una palabra reservada */ 
z-index:  auto;
/*  valores numéricos */ 
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;  /* Los números negativos tienen el orden más bajo */
/* valores globales */ 
z-index: inherit;
z-index: initial;
z-index: unset;

Ejemplos y aplicaciones en código

En el siguiente ejemplo, mostraremos tres elementos que

tienen propiedades para z-index organizar en el eje Z en un orden diferente al orden HTML predeterminado (el último elemento definido en el HTML aparecerá más alto que el resto).

Código HTML:

 
  < span > Fondo intermitente  
   Golden Fund  
   Fondo verde

Código CSS:

.dashed-box { 
  z-index: 1;
  position: relative;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
  padding: 1em;
}
.gold-box { 
  z-index: 3;
  position: absolute;
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
  padding: 1em;
}
.green-box { 
  z-index: 2;
  position: absolute;
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
  padding: 1em;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	3,0	4.0	4.0	1.0

Características general

Un valor numérico positivo o negativo determina el orden del elemento en el eje Z, y los valores negativos dan al elemento la prioridad más baja en el orden.

auto

Este valor establecerá el orden del elemento en el mismo orden que el del elemento padre. Este es el valor predeterminado.

Estructura z-index css

z-index: auto | ;

Consulte también

La página de propiedades position que describe cómo se coloca el objeto en el documento.
En la página de cada una de las propiedades top, bottom, right y left, son responsables de localizar el elemento.
La página de propiedades float que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece.