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;
/* <integer> 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 <div> 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:

<div class="dashed-box"> 
  < span > Fondo intermitente </ span > 
  <div class="gold-box"> Golden Fund </ div > 
  <div class="green-box"> Fondo verde </ div > 
</ div >

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

<integer>

Un valor numérico <length> 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 | <integer>;

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.