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.