Propiedad CSS z-index

La propiedad CSS z-index controla el orden de apilamiento de los elementos superpuestos — cuál aparece al frente y cuál queda oculto detrás. El nombre proviene del eje z imaginario: el eje x va de izquierda a derecha, el eje y de arriba a abajo, y el eje z apunta desde la pantalla hacia ti. Un elemento con un z-index mayor está más cerca del espectador y cubre a los elementos con un valor inferior.

Esta página explica qué hace z-index, por qué solo funciona en elementos posicionados, cómo los contextos de apilamiento deciden qué valores se comparan entre sí, y las razones más comunes por las que el z-index "no funciona".

Cómo funciona el apilamiento

Por defecto, cuando los elementos se superponen, el que aparece más tarde en el código HTML se pinta encima. z-index te permite anular ese orden de forma explícita. Por ejemplo, z-index: 10 quedará por encima de z-index: 1, independientemente del orden en el código fuente, y los valores negativos como z-index: -1 empujan un elemento detrás de su padre.

Sin embargo, z-index no es una clasificación global. Los valores solo se comparan dentro del mismo contexto de apilamiento. Un contexto de apilamiento es una capa autocontenida: todos los elementos dentro de él se apilan en relación con sus hermanos, y el grupo entero se apila como una unidad dentro de su contexto padre. La raíz de la página (<html>) crea el primer contexto de apilamiento, y ciertas propiedades crean nuevos (ver más abajo).

Información

La propiedad z-index no tiene efecto en los elementos static (el valor por defecto). Solo se aplica a los elementos posicionados — aquellos con position establecido en relative, absolute, fixed o sticky — y a los elementos flex/grid.

Valor inicial	auto
Aplicable a	Elementos posicionados.
Heredable	No.
Animable	Sí.
Versión	CSS2
Sintaxis DOM	object.style.zIndex = "-1";

Sintaxis

Sintaxis de la propiedad CSS z-index

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

Ejemplo de la propiedad z-index con un valor negativo:

Ejemplo de la propiedad CSS z-index con valor negativo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 0;
        top: 10px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100" />
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad z-index con un valor positivo:

Ejemplo de la propiedad CSS z-index con valor numérico

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue,
      #green,
      #grey {
        position: absolute;
        width: 150px;
        height: 150px;
        color: #eee;
        opacity: 0.95;
        padding: 15px;
        line-height: 100px;
        text-align: center;
      }
      #blue {
        z-index: 1;
        background-color: #1c87c9;
        top: 60px;
        left: 50px;
        line-height: 1;
      }
      .black {
        height: 80px;
        width: 160px;
        background-color: #000;
        line-height: 100px;
        bottom: 20px;
        position: absolute;
        z-index: 10;
      }
      #green {
        z-index: 2;
        background-color: #8ebf42;
        top: 100px;
        left: 170px;
      }
      #grey {
        background-color: #666;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <div class="container">
      <div id="blue">
        Blue
        <div class="black">Black</div>
      </div>
      <div id="green">Green</div>
      <div id="grey">Grey</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Aquí las cajas se superponen porque todas están posicionadas de forma absoluta. La caja azul (z-index: 1) queda por debajo de la caja verde (z-index: 2), y la caja gris no tiene z-index, por lo que recurre al orden del código fuente. Ten en cuenta que la caja negra (z-index: 10) está anidada dentro de la caja azul: su z-index: 10 solo se compara con los demás hijos de la caja azul, por lo que no puede elevarse por encima de la caja verde aunque 10 > 2. Esta es la regla del contexto de apilamiento en acción.

Resultado

Valores

Valor	Descripción	Pruébalo
auto	El nivel de apilamiento de la caja generada es igual al de su padre. Este es el valor por defecto de la propiedad.	Pruébalo »
number	El nivel de apilamiento de la caja generada se especifica con números. Los valores negativos son válidos.	Pruébalo »
initial	Hace que la propiedad use su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Qué crea un nuevo contexto de apilamiento

Entender los contextos de apilamiento es la clave para dominar z-index. Un nuevo contexto es creado por, entre otros:

El elemento raíz <html>.
Un elemento posicionado (relative, absolute, fixed, sticky) con un z-index distinto de auto.
Un hijo flex o grid con un z-index distinto de auto.
Un elemento con opacity menor que 1 (ver opacity).
Un elemento con un valor de transform, filter, perspective, clip-path o mask distinto de none (ver transform).
Un elemento con position: fixed o position: sticky.
Un elemento con isolation: isolate.
Un elemento con will-change establecido en una propiedad que crearía un contexto.

Una vez que un elemento forma un contexto de apilamiento, el z-index de sus descendientes queda "atrapado" dentro de él — nunca podrán escapar para competir con elementos fuera del padre.

Por qué tu z-index "no funciona"

Estos son los culpables habituales, en orden de frecuencia:

El elemento es static. z-index se ignora silenciosamente a menos que position sea relative, absolute, fixed o sticky (o el elemento sea un item flex/grid). Establece una posición primero.
Un padre forma un contexto de apilamiento. Un modal con z-index: 9999 puede seguir quedando oculto detrás de otro elemento si su ancestro se encuentra en un contexto de menor apilamiento. La solución es elevar el z-index del ancestro, no el del descendiente.
Un ancestro tiene opacity o transform. Incluso un opacity: 0.99 o transform: translateZ(0) aparentemente inofensivos (a menudo añadidos para "aceleración por GPU") crean un contexto de apilamiento y pueden atrapar a los hijos.
Estás luchando contra el orden del código fuente. Sin z-index, los elementos posteriores ganan. Reordenar el HTML a veces es más sencillo que una carrera de z-index.

Advertencia

Evita los "números mágicos" enormes como z-index: 999999. Hacen que el orden de apilamiento sea imposible de entender. Mantén una escala pequeña y documentada (por ejemplo 1, 10, 100, 1000 para contenido, menús desplegables, barras fijas y modales).

Ejemplo: aislar un contexto de apilamiento

La propiedad isolation: isolate crea un nuevo contexto de apilamiento sin cambiar el posicionamiento ni la opacidad. Es la forma más limpia de contener los valores de z-index de un componente:

.card {
  /* z-index values inside .card now stay inside .card */
  isolation: isolate;
}

Propiedades relacionadas

position — necesaria para que z-index surta efecto.
opacity — los valores inferiores a 1 crean un contexto de apilamiento.
transform — los valores distintos de none crean un contexto de apilamiento.

Práctica

¿Qué hace la propiedad 'z-index' en CSS?

Permite que los elementos se superpongan con control sobre cómo se apilan.Cambia el color de un elemento.Decide el orden de apilamiento de los elementos posicionados.Modifica el tamaño de un elemento.Solo es efectiva en elementos posicionados.Manipula el estilo del borde de un elemento.