Contexto de Apilamiento (Stackng context )
Caso #3

Factores que afectan al orden de apilamiento de los elementos

Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento (asi como también lo hace asignar una opacidad parcial).

Orden del contexto de apilamiento de arriba a abajo:

1. Elementos posicionados con z-index ≥ 1
2. Elementos posicionados sin z-index declarado o con z-index: auto
3. Elementos no posicionados
4. Elementos posicionados con z-index < 0

CASO #3

Los elementos no posicionados están por encima de los elementos posicionados y con z-index < 0

Ejemplo 1

Cuando la caja 2 no tenga z-index < 0, se mantendrá por encima de la caja 1.

Ejemplo 2

Cuando la caja 4 tenga z-index < 0, se colocará debajo de la caja 3.