CSS: z-index no funciona — Por qué y cómo solucionarlo

1. Añadir position al elemento

/* ❌ z-index ignorado con position: static (valor por defecto) */
.mi-elemento {
  z-index: 999;
}
/* ✅ z-index funciona con cualquier position distinto de static */
.mi-elemento {
  position: relative; /* o absolute, fixed, sticky */
  z-index: 999;
}

2. Identificar el stacking context del padre

/* ❌ El padre tiene transform — crea nuevo stacking context */
/* El hijo nunca podrá superar al elemento externo */
.padre {
  transform: translateX(0); /* ← Crea stacking context */
}
.hijo {
  position: absolute;
  z-index: 9999; /* Inútil fuera del contexto del padre */
}
/* ✅ Solución: mover el elemento fuera del padre problemático */
/* O usar isolation: isolate conscientemente */

3. Usar isolation para crear stacking context intencionado

/* Crear un contexto de apilamiento limpio */
.modal-container {
  isolation: isolate;
  position: relative;
  z-index: 100;
}

4. Sistema de z-index con variables CSS

:root {
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

5. Caso Tailwind: z-index y stacking context

  
No puede salir del padre

6. Debuggear el stacking context

// En DevTools Console: ver qué crea stacking context
// Busca elementos con: transform, opacity < 1, filter, will-change,
// position + z-index, isolation: isolate, contain: layout/paint/strict
document.querySelectorAll('*').forEach(el => {
  const style = getComputedStyle(el);
  const creates = style.transform !== 'none' ||
    parseFloat(style.opacity) < 1 ||
    style.filter !== 'none' ||
    style.isolation === 'isolate';
  if (creates) console.log('Stacking context:', el);
});