Contexto de Apilamiento (Stackng context )
Caso #2

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 #2

Los elementos posicionados sin z-index declarado o con z-index: auto están por encima de los elementos no posicionados

Ejemplo 1

Cuando la caja 1 no esté posicionada se mantendrá por debajo de la caja 2.

Soy la caja 1
Como no estoy posicionada, me mantengo por debajo de la caja 2.
Soy la caja 2
Estoy posicionada

ejemplo 2

Cuando la caja 3 esté posicionada se colocará encima de la caja 4.

Soy la caja 3
Cuando estoy posicionada, por ejemplo con position: relative, entonces me coloco encima de la caja 4.
Soy la caja 4