z-index
Indica la profundidad del elemento en la página o posición en el eje Z. Por defecto el valor es 0. Se puede emplear para cuando un elemento esté encima de otro por ejemplo. Sus valores son:
z-index sólo funciona en elementos que tienen una propiedad position con valor relative, absolute, fixed o sticky. No tiene efecto en elementos con position static (valor por defecto)
- auto: el navegador decide.
- Numero negativo, 0, o positivo: Cuanto menor sea el valor más profundo estará el elemento, y cuanto mayor más arriba. Lo que define este valor es que si dos elementos tienen partes que están en el mismo sitio, cuál es el que estará más arriba y por lo tanto, será completamente visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ejemplo selectores</title>
<link rel="stylesheet" href="posicionamiento.css" />
</head>
<body>
<main class="contenedor-apilado">
<div class="caja caja-roja">Caja 1: z-index: 1</div>
<div class="caja caja-verde">Caja 2: z-index: 5 (¡Arriba!)</div>
<div class="caja caja-azul">Caja 3: z-index: 3</div>
</main>
</body>
</html>- La caja verde (z-index: 5) estará encima de todas
- La caja azul (z-index: 3) estará en medio
- La caja roja (z-index: 1) estará en la parte inferior
Es importante entender el concepto de contexto de apilamiento:
- Sin z-index: Si no usas z-index, el orden de apilamiento se basa en el orden en que los elementos aparecen en el HTML, los que aparecen más tarde se superponen a los anteriores.
- Contextos de apilamiento (stacking context): cuando un elemento tiene un position diferente a static y un z-index definido, crea un nuevo contexto de apilamiento. Los z-index de los hijos solo tienen sentido dentro de su contexto de apilamiento. Ejemplo: Si la caja verde tuviera un hijo con z-index: 999, este hijo nunca podrá superponerse a un hermano de caja-verde si el z-index de caja-verde es menor que el de su hermano. El padre (caja-verde) establece el límite de apilamiento para todos sus hijos.
Ejemplo de contextos de apilamiento
En este escenario, tenemos dos contenedores principales apilados. Cada uno tiene un hijo con un z-index muy alto. El resultado final se rige por el z-index del padre, no por el del hijo.
<div class="padre-rojo">
Padre Rojo: z-index: 2
<div class="hijo-rojo">Hijo Rojo: z-index: 999</div>
</div>
<div class="padre-verde">
Padre Verde: z-index: 5
<div class="hijo-verde">Hijo Verde: z-index: 10</div>
</div>Aunque el hijo rojo tiene un z-index: 999, el hijo verde tiene solo z-index:10, la caja verde siempre estará encima de la caja roja. ¿Por qué? Porque el navegador primero apila los contenedores principales (.padre-rojo y .padre-verde).
Dado que padre-rojo tiene z-index: 2 < padre-verde que tiene z-index:5, todo el contexto de apilamiento verde (es decir, el .padre-verde y todos sus hijos), se coloca encima de todo el contexto de apilamiento rojo.
La regla clave es: El z-index de un elemento hijo nunca puede superar al z-index de su elemento padre en relación con otros elementos fuera de ese contexto- El hijo estará "encerrado" en la capa de su padre.
Esto es muy común en diseños complejos con modales, barras de navegación y otros elementos que se superponen. Siempre debemos asegurarnos de que el contenedor principal del elemento que quieres poner al frente tenga un z-index lo suficientemente alto.