CSS | La transparencia y el apilamiento

Ejemplo 1

La caja roja está posicinada y queda por encima del contenedor blanco que no lo está.

Soy una caja

Estoy posicionada, es lo que me coloca por encima en el orden de apilamiento.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eaque numquam ipsam molestiae sed accusamus.

Soy un contenedor.
No estoy posicionado ni tengo transparencia.

Soy un párrafo en el contenedor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, omnis, vitae quos explicabo molestias nisi veritatis doloremque totam minima, officia quam enim cupiditate id. Itaque neque nobis amet ducimus tempora!

Ejemplo 2

El orden de apilamiento se ve alterado por la transparencia del contenedor.

Soy una caja

Estoy posicionada.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eaque numquam ipsam molestiae sed accusamus.

Soy un contenedor.
No estoy posicionado, pero tengo transparencia. La transparencia me posiciona por encima de la caja roja.

Soy un párrafo en el contenedor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, omnis, vitae quos explicabo molestias nisi veritatis doloremque totam minima, officia quam enim cupiditate id. Itaque neque nobis amet ducimus tempora!

Ejemplo 3

Incluso con una mínima transparencia en el contenedor blanco, el orden de apilamiento se ve alterado.

Soy una caja

Estoy posicionada.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eaque numquam ipsam molestiae sed accusamus.

Soy un contenedor.
No estoy posicionado, pero tengo una chispirritina de transparencia. La suficiente transparencia para posicionarme por encima de la caja roja.

Soy un párrafo en el contenedor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, omnis, vitae quos explicabo molestias nisi veritatis doloremque totam minima, officia quam enim cupiditate id. Itaque neque nobis amet ducimus tempora!