Contexto de Apilamiento (Stackng context )
Caso #1

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

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

Ejemplo 1

Cuando la caja 1 no tiene z-index ≥ 1 se mantendrá por abajo.

Soy la caja 1
Estoy posicionada, pero no tengo z-index declarado.
Soy la caja 2
También estoy posicionada y sin z-index declarado. Estoy por encima de la caja 1.

Ejemplo 2

Cuando la caja 3 tiene z-index ≥ 1, se coloca encima de la caja 4.

Soy la caja 3
Estoy posicionada y tengo z-index: 1. Estoy por encima de la caja 4.
Soy la caja 4
Estoy posicionada pero no tengo z-index declarado.