Características z-index en CSS

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 inicialauto
Aplicado aElementos posicionados.
HeredableNo
Móvil
Valor calculadoComo 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ísticaChromeFirefoxIEÓperaSafari
Soporte básico1.03,04.04.01.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 topbottomrightleft, 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.