La propiedad 'z-index'

En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarán". En este caso, vamos a usar como ejemplo a dos párrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.

Repetimos los dos párrafos anteriores pero haciendo que se superpongan. Para eso, le aplicamos al primero las propiedades: position:relative y z-index: 0, y al segundo: position:relative, top: -3em y z-index: 1.

En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarán". En este caso, vamos a usar como ejemplo a dos párrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.

Vemos que el segundo párrafo se superpone con el primero y queda al frente al tener z-index=1. En realidad, aunque no hubiésemos usado la propiedad z-index igualmente qudaría por encima al estar ubicado a continuación dentro del código de la página, pero de este modo nos aseguramos su orden dentro de la pila.
Para hacer que quede por debajo, usamos las mismas propiedades pero con un valor z-index: 2 para el primer párrafo.

En los casos en que dos elementos queden superpuestos, podemos determinar el orden en que se "apilarán". En este caso, vamos a usar como ejemplo a dos párrafos: este mismo y el siguiente, con fondo amarillo y una imagen centrada.