Z-index y contexto de apilamiento
Controle qué elementos aparecen encima mediante z-index y comprenda los contextos de apilamiento.
Z-index y contexto de apilamiento es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es z-index?
z-index controla el orden de apilamiento de los elementos posicionados a lo largo del eje Z (de delante hacia atrás). Cuando los elementos se superponen, los valores más altos aparecen por encima de los más bajos.
z-index solo funciona en elementos posicionados
z-index no tiene efecto en elementos con position: static (el valor predeterminado). Debe utilizar relative, absolute, fixed o sticky para que se aplique z-index.
<div class="popup">Popup (position + z-index)</div>
Orden de apilamiento predeterminado
Sin un z-index explícito, los elementos se apilan en este orden (de atrás hacia delante):
- Fondo del elemento raíz
- Elementos de nivel de bloque (en el orden del flujo)
- Elementos flotantes
- Elementos en línea
- Elementos posicionados con z-index: auto o 0
Contexto de apilamiento
Un contexto de apilamiento es una capa de elementos con un eje z común. Los valores de z-index solo compiten dentro del mismo contexto de apilamiento. Un elemento dentro de un contexto de apilamiento no puede colocarse por encima de elementos que están fuera de él, independientemente del valor de z-index.
¿Qué crea un contexto de apilamiento?
Los siguientes elementos crean un contexto de apilamiento nuevo:
position+z-indexdistinto de autoopacitymenor que 1transform,filteroperspectiveaplicadoswill-changeen propiedades específicasisolation: isolate- Elementos hijos de flex o grid con z-index
Aislamiento del contexto de apilamiento
Utilice isolation: isolate para crear intencionadamente un contexto de apilamiento sin efectos visuales secundarios. Resulta útil para componentes de interfaz que necesitan contener sus propias capas de z-index.
<div class="modal-wrapper">Isolated stacking context</div>
El problema de la escala de z-index
Los proyectos suelen sufrir «guerras de z-index», en las que los desarrolladores compiten aumentando los valores hasta 9999 o 99999. Resuelva este problema con una escala de z-index con nombres mediante variables CSS:
<p>Custom properties define a z-index scale used across the app.</p>
z-index negativo
Los valores de z-index negativos colocan los elementos detrás del fondo del bloque contenedor. Esto puede utilizarse para colocar capas decorativas de pseudo elementos detrás del contenido.
<div class="card">Card with a decorative gradient layer behind it</div>
Depuración de problemas de apilamiento
Cuando un modal o una sugerencia aparece detrás de otro elemento, normalmente la causa es un contexto de apilamiento en un antecesor con un z-index bajo. Utilice la vista 3D de DevTools o compruebe la opacidad, la transformación y el filtro de los elementos padre.
z-index en Flex y Grid
Los elementos de flex y grid pueden utilizar z-index directamente sin establecer position de forma explícita. El navegador los trata como posicionados a efectos del apilamiento.
<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>
Modales fijos y z-index
Los modales deben ser hijos directos de <body> (o de un contenedor de nivel superior) para escapar de los contextos de apilamiento de los antecesores. El elemento HTML <dialog> gestiona esto de forma nativa en la capa superior del navegador.
Comprobación rápida
Dos elementos superpuestos tienen ambos z-index: 100 en contextos de apilamiento de padres diferentes. ¿Qué determina cuál aparece encima?
Resumen
z-index controla el apilamiento de elementos posicionados de delante hacia atrás. Los contextos de apilamiento aíslan la competencia entre valores de z-index. Cualquier elemento que cree un contexto de apilamiento en un padre puede impedir que los valores de z-index de sus hijos tengan efecto fuera de él. Utilice isolation: isolate para crear límites explícitos y variables CSS para definir una escala de z-index.
Preguntas frecuentes
¿La lección «Z-index y contexto de apilamiento» es gratis?
Sí — el texto completo de «Z-index y contexto de apilamiento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Z-index y contexto de apilamiento»?
Controle qué elementos aparecen encima mediante z-index y comprenda los contextos de apilamiento. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Z-index y contexto de apilamiento»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Posicionamiento estático y relativo
- Posicionamiento absoluto y bloque contenedor
- Posicionamiento fijo y sticky
- Z-index y contexto de apilamiento