Cuando trabajas con CSS, es común que los elementos se superpongan entre sí. Esto puede ocurrir por el uso de la propiedad position o cuando estableces elementos flotantes. Para controlar cómo se superponen los elementos, CSS nos proporciona la propiedad z-index.
¿Qué es el z-index?
z-index determina el orden en que los elementos aparecen en la pantalla en el eje `z`, es decir, en qué capa se encuentran.
Imagina que tienes varias hojas de papel apiladas en una mesa: el z-index te permite decidir qué hoja queda encima de cuál.
Ejemplo:
Observemos lo que sucede cuando posicionamos tres bloques con position: absolute:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Aquí, los bloques .block-one, .block-two y .block-three están en la misma posición, pero únicamente el último es visible. ¿Por qué?
Cuando varios elementos tienen position: absolute, el navegador los coloca uno encima del otro en el orden en que aparecen en el código HTML. Si no especificamos z-index, el último elemento del HTML quedará encima de los demás.
Veamos cómo esto se hace más evidente cuando les damos diferentes tamaños:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Aquí puedes notar que los bloques realmente no desaparecen, simplemente quedan ocultos detrás de otros.
Cómo funciona z-index
La propiedad z-index permite asignar un nivel de superposición a los elementos. Funciona con valores numéricos:
- Mayor número = el elemento está más arriba en la pila.
- Menor número = el elemento está más abajo.
Por defecto, los elementos siguen este orden de capas:
- El fondo de la página (el elemento
<html>). - Los elementos en el flujo normal del documento (sin
position: absolute,relative,fixedosticky). - Los elementos posicionados (
absolute,relative,fixed,sticky) en el orden en que aparecen en el HTML. - Finalmente, el
z-indexasignado a cada uno.
Ejemplo con z-index
Cambiemos la superposición usando valores diferentes de z-index:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Aquí, se ha cambiado el z-index de .block-two para que quede encima de .block-three.
Notas sobre z-index
- Solo funciona en elementos con
position: absolute,relative,fixedosticky. - Los valores pueden ser positivos, negativos o cero.
- Un número mayor significa que el elemento estará por encima de los elementos con
z-indexmenor. - Es recomendable usar valores
z-indexen incrementos de100en proyectos grandes para facilitar la organización:
z-index: 100;
z-index: 200;
z-index: 300;
Esto es más fácil de gestionar que números arbitrarios como:
z-index: 34234;
z-index: 43233;
z-index: 34324;
Si los valores son menores a 100, esta recomendación no es necesaria.
Resumen
z-indexdefine qué elementos se superponen a otros en el ejez.- Un número mayor significa que estará más arriba en la pila de superposición.
- Funciona solo con elementos que tienen
position: relative,absolute,fixedosticky. - Sin
z-index, los elementos se superponen según el orden en el HTML. - Es recomendable usar valores en incrementos de
100para facilitar la organización del código.
Con esta propiedad, puedes controlar mejor la visibilidad y jerarquía de los elementos en la página. Experimenta con los ejemplos en CodePen para ver cómo funciona en diferentes situaciones.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
