⌘K

Propiedad z-index

La propiedad z-index establece qué elemento quedará encima en caso de que varios elementos se superpongan entre sí.

Sintaxis

cssselector {
  z-index: número | auto;
}

El número debe ser entero, positivo o negativo. Puede ser cero.

Valores

Valor Descripción
Número Un número entero establece el orden de superposición de elementos: al superponerse elementos, quedará encima aquel que tenga un z-index mayor.
auto El orden de superposición se construye automáticamente: quedará más arriba aquel elemento que esté ubicado más abajo en el código HTML.

Valor por defecto: auto.

Ejemplo

En este ejemplo, los bloques se superpondrán entre sí en el orden en que aparecen en el código HTML (z-index no está definido y tendrá su valor por defecto - auto). El primer bloque estará en el fondo (rojo), y el último - encima de todos (verde): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Ejemplo

Cambiemos el orden de superposición definiendo z-index. Al bloque rojo - 3, al azul - 2, al verde - 1. El orden de superposición cambiará al inverso (encima de todos estará el bloque con z-index 3): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат:

BackPropiedad positionNextPseudoelemento backdrop