Visualizador de Apilamiento Z-Index
Visualiza contextos de apilamiento CSS z-index con un constructor de capas interactivo. Añade, reordena y configura capas con nombres, valores z-index y ajustes de contexto de apilamiento. Ve el orden de renderizado en una vista previa visual en vivo, detecta problemas comunes como z-indices duplicados y copia el CSS generado. Totalmente privado, 100 % gratis y sin registro.
Layers (5)
Stacking Order
¿Por qué usar nuestro visualizador de apilamiento z-index?
- Vista previa visual de contextos de apilamiento: Ve exactamente cómo se apilan tus capas con una vista previa visual en vivo. Cada capa se muestra con su z-index real, indicando qué elementos aparecen delante. La vista previa se actualiza automáticamente al añadir, eliminar o reordenar capas.
- Avisos inteligentes y buenas prácticas: El visualizador de z-index detecta automáticamente problemas comunes: valores z-index duplicados, valores extremadamente altos (9999+) y contextos de apilamiento ausentes. Cada aviso incluye una explicación clara del problema y cómo solucionarlo.
- 100 % privado - Sin subidas: Toda la visualización de contextos de apilamiento ocurre localmente en tu navegador. Tus configuraciones de capas nunca salen de tu dispositivo y nunca se envían a ningún servidor.
- Gratis y sin límites: Crea configuraciones de apilamiento z-index ilimitadas sin registro, sin suscripción y sin límites de uso. El visualizador de apilamiento z-index es completamente gratis para siempre, sin anuncios que bloqueen la interfaz.
Casos de uso habituales del visualizador de apilamiento z-index
- Depuración de problemas de apilamiento: Los desarrolladores frontend usan el visualizador de apilamiento z-index para depurar elementos que aparecen en el orden incorrecto. Añade tus capas con sus valores z-index y ve al instante la pila de renderizado: identifica conflictos y corrígelos sin prueba y error en DevTools.
- Planificación de modales y superposiciones: Los diseñadores de UI usan el visualizador de apilamiento z-index para planificar la arquitectura de z-index de diálogos modales. Planifica juntos las capas de superposición, contenido del modal y fondo, asegurando que los modales aparezcan sobre la navegación pero debajo de las alertas críticas.
- Arquitectura de sistemas de diseño: Los equipos de sistemas de diseño usan el visualizador de z-index para definir y documentar escalas de z-index para su biblioteca de componentes. Establece niveles de z-index claros para navegación, superposiciones, tooltips, modales y notificaciones, garantizando coherencia en todos los componentes.
- Layouts sticky y fixed: Los diseñadores de layouts usan el visualizador de apilamiento z-index para planificar cabeceras sticky, barras laterales fijas y botones de acción flotantes. Estos elementos posicionados crean nuevos contextos de apilamiento que requieren una gestión cuidadosa del z-index para apilarse correctamente.
- Sistemas de menús desplegables y tooltips: Los diseñadores usan el visualizador de z-index para planificar menús desplegables anidados y sistemas de tooltips que deben aparecer sobre todo el contenido de la página sin romper los contextos de apilamiento. Comprende cómo cada nivel de menú desplegable crea un nuevo contexto de apilamiento.
- Revisión de código y documentación: Los líderes de equipo y desarrolladores senior usan el visualizador de apilamiento z-index durante las revisiones de código para explicar problemas de contextos de apilamiento y documentar arquitecturas de z-index recomendadas. Comparte diagramas visuales de apilamiento en descripciones de PR y documentación.
¿Qué es z-index?
Z-index es una propiedad CSS que controla el orden de apilamiento de los elementos posicionados a lo largo del eje z (el eje que sale hacia ti de la pantalla). Los elementos con un z-index más alto aparecen delante de los elementos con un z-index más bajo. Z-index solo funciona en elementos posicionados: aquellos con position: relative, absolute, fixed o sticky. Nuestro visualizador de apilamiento z-index te ayuda a comprender y gestionar estas relaciones visualmente.
Cómo funciona nuestro visualizador de apilamiento z-index
- Añade y configura capas: Cada capa representa un elemento posicionado con un nombre, valor z-index, color y ajuste de contexto de apilamiento. Añade nuevas capas, reordénalas o carga uno de los preajustes para empezar.
- Ve la pila visual: El área de vista previa muestra todas las capas como cajas superpuestas con sus valores z-index. Las capas con valores z-index más altos aparecen delante. Activa el conmutador de contexto de apilamiento para marcar las capas que crean nuevos contextos de apilamiento.
- Revisa los avisos y exporta el CSS: La herramienta detecta automáticamente posibles problemas como z-indices duplicados o contextos de apilamiento ausentes. Copia el CSS generado para tus capas con un clic.
¿Qué crea un nuevo contexto de apilamiento?
- Elemento raíz - el propio elemento HTML crea el contexto de apilamiento raíz.
- Elementos posicionados con z-index - cualquier elemento con position: relative, absolute, fixed o sticky Y un valor z-index distinto de auto.
- Opacidad menor que 1 - los elementos con opacity < 1 crean un nuevo contexto de apilamiento (usado para aislar el renderizado).
- Transformaciones CSS - cualquier elemento con un transform distinto de none crea un nuevo contexto de apilamiento.
- Filtros CSS - los elementos con filter o backdrop-filter crean nuevos contextos de apilamiento.
- will-change - la propiedad will-change puede crear contextos de apilamiento.
- contain - contain: layout o contain: paint crean contextos de apilamiento.
Por qué importan los contextos de apilamiento
Los contextos de apilamiento son uno de los conceptos CSS más malentendidos. Cuando un elemento crea un nuevo contexto de apilamiento, los valores z-index de sus hijos quedan acotados a ese contexto: solo pueden superponerse a otros elementos dentro del mismo contexto. Por eso un hijo con z-index 9999 puede seguir apareciendo detrás del hermano de su padre si el padre tiene un z-index más bajo en el contexto raíz. El visualizador de apilamiento z-index deja clara esta relación mostrando qué capas crean nuevos contextos y cómo se relacionan los valores z-index en toda la jerarquía de apilamiento.
Preguntas frecuentes
Un contexto de apilamiento es un grupo de elementos que comparten un mismo padre y se apilan juntos. Los elementos dentro de un contexto de apilamiento se apilan entre sí de forma relativa, y todo el contexto se apila de forma relativa a los contextos hermanos. Esto significa que un elemento hijo con z-index 9999 dentro de un padre con z-index 1 seguirá apareciendo detrás de un hermano de ese padre con z-index 2. Los contextos de apilamiento se crean mediante elementos posicionados con z-index, opacidad menor que 1, transforms, filters y varias otras propiedades CSS.
Si z-index: 9999 no pone tu elemento por delante, probablemente esté atrapado dentro de un contexto de apilamiento. Comprueba si algún elemento ancestro crea un contexto de apilamiento (tiene position + z-index, opacity < 1, transform, filter o will-change). El z-index de tu elemento solo se aplica dentro del contexto de apilamiento de ese ancestro. Para solucionarlo, mueve el elemento fuera de ese ancestro en el DOM o aumenta el z-index del ancestro.
Z-index es la propiedad que define la posición de un elemento a lo largo del eje z (de delante hacia atrás). Un contexto de apilamiento es el ámbito dentro del cual se comparan los valores z-index. Piensa en los contextos de apilamiento como pisos de un edificio: cada piso (contexto de apilamiento) tiene su propio orden, y los pisos mismos se apilan entre sí. Sin entender los contextos de apilamiento, los valores z-index pueden parecer impredecibles, que es exactamente lo que ayuda a comprender el visualizador de apilamiento z-index.
Sí. En CSS, la propiedad z-index solo funciona en elementos posicionados (position: relative, absolute, fixed o sticky). Si estableces z-index en un elemento estático (por defecto), se ignorará. La única excepción son los elementos de CSS Grid y Flexbox, donde z-index puede funcionar sin posicionamiento explícito. El visualizador de apilamiento z-index asume que todas las capas están posicionadas.
Una escala de z-index recomendada mantiene los valores espaciados para dejar espacio a adiciones futuras. Un enfoque habitual: 0-9 para capas de contenido de página, 10-19 para encabezados y navegación, 20-29 para elementos sticky, 100-199 para menús desplegables y tooltips, 200-299 para superposiciones y fondos, 300-399 para modales y 400+ para notificaciones y toasts críticos. Usar incrementos de 10 o 100 entre niveles deja margen para valores intermedios.
Sí. El visualizador de apilamiento z-index es 100 % gratis, sin registro, sin funciones premium y sin límites de uso. Crea configuraciones de apilamiento ilimitadas sin restricciones ni costes ocultos.
Sí. El visualizador de apilamiento z-index es una excelente herramienta didáctica. La vista previa visual con capas superpuestas facilita demostrar cómo funcionan z-index y los contextos de apilamiento. Los avisos automáticos ayudan a los estudiantes a entender los errores comunes, y la tabla de orden de apilamiento ofrece un listado numerado y claro del orden de renderizado de abajo arriba.
El contexto de apilamiento raíz es el contexto por defecto creado por el propio elemento HTML. Todos los elementos que no crean su propio contexto de apilamiento existen dentro del contexto raíz o de un contexto descendiente. El contexto raíz está siempre en la base de la jerarquía de apilamiento. El visualizador de apilamiento z-index incluye el contexto raíz como primera capa por defecto, representando el fondo de la página.