Tema 11 · Capas y z-index

Eje Z, Capas y Contexto de Apilamiento

Aprende a controlar la superposición tridimensional en la pantalla con z-index, la condición obligatoria de posicionamiento y el funcionamiento de los contextos de apilamiento.

Posicionamiento (static, relative, absolute, fixed, sticky) Desbordamiento (overflow) y Flotación

¿Qué es el Eje Z en la Web?

La pantalla de tu dispositivo tiene un ancho horizontal (Eje X) y una altura vertical (Eje Y). El Eje Z representa la profundidad virtual que sale perpendicularmente desde la pantalla hacia los ojos del usuario.

La propiedad z-index especifica el orden de apilamiento de los elementos que se superponen entre sí. Un valor numérico mayor se dibuja siempre por encima de un valor menor.

La Regla de Oro de z-index

¡Requisito indispensable! La propiedad z-index no tiene ningún efecto en elementos con position: static (el valor por defecto). Para que funcione, el elemento debe tener declarado position: relative, absolute, fixed, o sticky.

¿Qué es un Contexto de Apilamiento (Stacking Context)?

A veces asignas z-index: 999999 a un modal o botón y aún así queda tapado por otro elemento. Esto ocurre porque el elemento pertenece a un Contexto de Apilamiento inferior:

  • Los contextos de apilamiento funcionan como carpetas jerárquicas: un archivo dentro de la Carpeta 1 (con z-index 1) jamás podrá estar visualmente por encima de nada dentro de la Carpeta 2 (con z-index 2), sin importar cuán alto sea su índice interno.
  • Propiedades que generan nuevos contextos automáticamente: opacity menor a 1, transform diferente de none, filter o isolation: isolate.

⚡ Capas Superpuestas y Ventana Modal con z-index

Observa cómo el fondo oscuro semitransparente (z-index: 10) cubre el contenido de la página, mientras que la ventana modal (z-index: 20) flota por encima de todo:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Eje Z y Capas CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f5f9;
      margin: 0;
      padding: 30px;
      color: #0f172a;
    }

    /* Tarjetas de fondo (capa base) */
    .tarjeta-base {
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 20px;
      max-width: 480px;
      margin-bottom: 20px;
    }

    /* Capa de velo oscuro (Backdrop) */
    .overlay-velo {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.65);
      z-index: 10; /* Por encima de la página */
    }

    /* Cuadro modal emergente */
    .modal-flotante {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 12px;
      padding: 26px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
      z-index: 20; /* Por encima del velo oscuro */
      text-align: center;
    }

    .btn-abrir {
      background: #2563eb;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="tarjeta-base">
    <h3>Contenido de Fondo en Kilopolis</h3>
    <p style="color: #64748b; font-size: 0.95rem;">
      Esta tarjeta tiene un nivel de profundidad ordinario en la página. Haz clic abajo para abrir un diálogo modal con z-index superior:
    </p>
    <button class="btn-abrir" onclick="abrirModal()">
      Abrir Ventana Modal &raquo;
    </button>
  </div>

  <!-- Capa 1: Fondo Oscuro (z-index: 10) -->
  <div id="miVelo" class="overlay-velo" onclick="cerrarModal()"></div>

  <!-- Capa 2: Modal (z-index: 20) -->
  <div id="miModal" class="modal-flotante">
    <h3 style="margin-top: 0; color: #1e40af;">Ventana Modal Activa</h3>
    <p style="color: #475569; font-size: 0.9rem;">
      Este elemento tiene <code>z-index: 20</code>, flotando por encima del velo oscuro (<code>z-index: 10</code>).
    </p>
    <button class="btn-abrir" style="background: #0f172a;" onclick="cerrarModal()">
      Cerrar Diálogo
    </button>
  </div>

  <script>
    function abrirModal() {
      document.getElementById('miVelo').style.display = 'block';
      document.getElementById('miModal').style.display = 'block';
    }
    function cerrarModal() {
      document.getElementById('miVelo').style.display = 'none';
      document.getElementById('miModal').style.display = 'none';
    }
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.