≡En resumen
- El eje Z representa la profundidad y es perpendicular al plano formado por X e Y.
- Su orientación cambia según la herramienta: en CSS apunta hacia el usuario, en Blender o en una impresora 3D es el eje vertical.
- En la web, z-index ordena elementos solapados, pero solo dentro de su contexto de apilamiento.
- translateZ() y perspective crean profundidad real en 3D; z-index solo cambia el orden de pintado.
- En diseño UI, el eje Z se traduce en elevación: sombras, capas y superficies que indican qué está encima y qué es interactivo.
01 ¿Qué es el eje Z (z-axis)?
En geometría, un punto en el espacio se describe con tres coordenadas (x, y, z). Los ejes X e Y forman un plano, como la hoja de papel o la pantalla, y el eje Z es la línea perpendicular a ese plano que añade la tercera dimensión: la profundidad o, según el contexto, la altura.
En tecnología y diseño digital el término aparece en tres usos principales: el orden de apilamiento de elementos en una página web, la profundidad en gráficos 3D y la jerarquía visual de las interfaces. Esta ficha trata esos tres usos; el movimiento a lo largo del eje y su alineación en máquinas tienen fichas propias.
02 Hacia dónde apunta el eje Z según la herramienta
Uno de los errores más frecuentes al pasar de una herramienta a otra es suponer que el eje Z siempre significa lo mismo. No es así: cada entorno elige su convención.
| Entorno | Qué representa Z | Detalle |
|---|---|---|
| Matemáticas (sistema dextrógiro) | Tercera dimensión | Regla de la mano derecha: X a la derecha, Y hacia arriba, Z hacia ti |
| CSS | Profundidad hacia el usuario | El eje Y apunta hacia abajo; translateZ positivo acerca el elemento |
| WebGL y Three.js | Profundidad | Y hacia arriba; la cámara mira por defecto hacia Z negativo |
| Blender | Altura | Z es el eje vertical (Z-up) |
| Impresión 3D y CNC | Altura de la herramienta o de la capa | Ver alineación en el eje Z |
03 El eje Z en CSS: z-index y contextos de apilamiento
En CSS, la propiedad z-index fija el orden de apilamiento de los elementos que se solapan: el de valor mayor se pinta encima. Acepta auto (valor inicial) o un número entero, también negativo, y solo afecta a elementos posicionados (position distinto de static) y a hijos de contenedores flex o grid.
La clave está en el contexto de apilamiento: un elemento con z-index numérico crea uno nuevo, y los valores de sus hijos solo se comparan entre ellos, nunca con elementos de fuera. Por eso un hijo con z-index: 9999 puede quedar debajo de un vecino con z-index: 2.
- ✓Elemento raíz (html).
- ✓Elemento posicionado (relative o absolute) con z-index distinto de auto.
- ✓Elemento con position: fixed o sticky.
- ✓Hijo de flex o grid con z-index distinto de auto.
- ✓opacity menor que 1 o mix-blend-mode distinto de normal.
- ✓transform, filter, perspective, clip-path o mask con valor distinto de none.
- ✓isolation: isolate, will-change sobre esas propiedades o contain: layout o paint.
- ✓Elementos en la capa superior (top layer), como diálogos modales y popovers.
Un menú desplegable con z-index: 1000 vive dentro de una cabecera con transform: translateY(0) que alguien añadió para una animación. Ese transform crea un contexto de apilamiento, así que el menú compite con el banner de cookies solo a través de la cabecera, que no tiene z-index. Resultado: el menú queda oculto. La solución no es subir a 99999, sino dar z-index a la cabecera o sacar el transform.
04 Profundidad real: translateZ() y perspective
z-index solo cambia el orden de pintado; no mueve nada en el espacio. Para situar un elemento en profundidad, CSS ofrece transformaciones 3D (CSS Transforms Module Level 2): translateZ() desplaza el elemento hacia el usuario (valores positivos) o lo aleja (negativos), y equivale a translate3d(0, 0, z).
Para que ese desplazamiento se vea hace falta perspectiva. La propiedad perspective en el contenedor fija la distancia entre el usuario y el plano z = 0: valores pequeños (300px) exageran el efecto y valores grandes (800px o más) lo suavizan. perspective-origin mueve el punto de fuga y transform-style: preserve-3d mantiene a los hijos en el mismo espacio 3D.
| Aspecto | z-index | translateZ() |
|---|---|---|
| Qué hace | Ordena el pintado de elementos solapados | Mueve el elemento en profundidad |
| Cambio de tamaño aparente | No | Sí, si hay perspectiva |
| Requisitos | Elemento posicionado, flex o grid item | Perspectiva en el padre o en la transformación |
| Crea contexto de apilamiento | Sí, con valor numérico | Sí, como cualquier transform |
| Uso típico | Menús, modales, tooltips | Tarjetas 3D, escenas y transiciones |
Animar esos valores en el tiempo es otro tema, con sus propios problemas de rendimiento y accesibilidad: lo tratamos en la ficha de movimiento en el eje Z. En gráficos 3D por GPU, la GPU decide qué píxel queda delante con el z-buffer o búfer de profundidad.
05 El eje Z en diseño de interfaces: capas y elevación
Aunque la pantalla es plana, las interfaces se diseñan como capas superpuestas. Colocar un elemento «más arriba» en el eje Z comunica que está activo, que es temporal o que requiere atención. Google formaliza esta idea en Material Design con la elevación: en Material 3 se expresa sobre todo con color tonal (las superficies elevadas toman más tono del color primario) y, de forma secundaria, con sombras.
Base
Fondo y contenido principal. Sin sombra ni elevación.
Superficies
Tarjetas, barras de navegación y cabeceras fijas. Elevación baja para separarlas del fondo.
Capas temporales
Menús desplegables, popovers y tooltips. Aparecen encima y desaparecen al terminar la acción.
Capas bloqueantes
Modales y diálogos con fondo oscurecido. Máxima elevación: exigen una respuesta antes de seguir.
06 Buenas prácticas con el eje Z en una web
-
1
Define una escala de capas
Pocos niveles con nombre (base, sticky, dropdown, modal, toast) guardados como variables o tokens.
-
2
Limita los contextos de apilamiento
Antes de subir un z-index, comprueba si un transform, opacity o filter del padre está creando un contexto nuevo.
-
3
Usa isolation: isolate
Crea un contexto de apilamiento a propósito en componentes reutilizables para que sus z-index internos no se filtren.
-
4
Aprovecha la capa superior
Un dialog abierto con showModal() y los elementos popover se pintan en la top layer, por encima de todo, sin necesidad de z-index.
-
5
Revisa en móvil
Cabeceras sticky, banners de cookies y chats flotantes compiten por el mismo espacio en pantallas pequeñas.
Estos problemas aparecen sobre todo cuando una web crece a base de plugins y parches. En un diseño web a medida la escala de capas se define desde el principio y los componentes se construyen respetándola.
Preguntas frecuentes sobre Z-axis
Es el tercer eje de un sistema de coordenadas cartesianas, perpendicular a los ejes X e Y, que representa la profundidad o la altura según el contexto.
Es la propiedad que decide qué elemento se pinta encima cuando dos se solapan. Acepta auto o un número entero y solo afecta a elementos posicionados y a hijos de flex o grid.
Normalmente porque el elemento no está posicionado o porque un antepasado crea un contexto de apilamiento con transform, opacity, filter o su propio z-index. Los valores solo se comparan dentro del mismo contexto.
z-index cambia el orden de pintado sin mover nada; translateZ() desplaza el elemento en profundidad y, con perspectiva, lo hace parecer más cerca o más lejos.
Depende del programa. En CSS y WebGL es la profundidad hacia el usuario; en Blender, en impresoras 3D y en máquinas CNC es el eje vertical.
Cualquier entero, pero los navegadores principales lo guardan como entero de 32 bits con signo, así que el límite práctico es 2.147.483.647. Si necesitas números así, el problema está en la arquitectura de capas.
Es la posición de una superficie en el eje Z de la interfaz. Material Design la expresa con color tonal y sombras para indicar qué está encima y qué requiere atención.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗