Superponiendo cosas con CSS

JMiur

Toda etiqueta es un rectángulo que se ubica ya sea uno al lado del otro o uno debajo del otro. Esto siempre es así salvo excepciones ... como todo.

Justamente, esas excepciones son las que nos permite superponer los rectángulos y hacer que uno se muestre encima del otro. Básicamente, hay dos propiedades que controlan esos detalles: position y z-index.

Por defecto, la propiedad position, tiene el valor static pero, admite otros como relative y absolute. Usando esos dos valores podemos ubicar cualquier cosa en un lugar preciso. Lo más simple es que el contenedor tenga el valor relative y el contendio el valor absolute:

HOLA

Así como está, no parece haber diferencias, si le quitamos as propiedades, se verá igual porque nos falta algo más, agregarle las que nos permitirán ubicarlo con exactitud y estas son top, right, bottom y left que son las "coordenadas" cuyo punto de origen es el borde del contenedor asi que si ponemos left: 30px y top: 50px, el contenido bajará 50 pixeles (borde superior = cero) y se movera otros 30 a la izquierda (borde izquierdo = cero):

HOLA

Y si ponemos right: 30px y bottom: 50px, el contenido subirá 50 pixeles (borde inferior = cero) y se movera otros 30 a la derecha (borde derecho = cero):

HOLA

De este modo, bien podríamos ubicar más de un contenido:

<div style="position: relative;">
<div style="position: absolute; left: 30px; top: 50px;"> CONTENIDO UNO </div>
<div style="position: absolute; right: 30px; bottom: 50px;"> CONTENIDO DOS </div>

</div>

CONTENIDO UNO

CONTENIDO DOS

En el ejemplo, dadas las ubicaciones, el segundo se superpone al primero y aparece por encima ya que esa es la forma normal en que se muestran los rectángulos; a medida que los agregamos, se van "apilando" y la propiedad z-index permite cambiar ese orden natural.

Como no los hemos definido, basta ponerles un número, y el que tenga el número más alto, se mostrará por encima sin importar la forma en que esté escrito el código; en este ejemplo, el tercero no se muestra arriba de los otros porque forzamos a que sea el segundo el que esté arriba de todo, poniéndole un valor de z-index superior:

<div style="position: relative;">
<div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> CONTENIDO UNO </div>

<div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CONTENIDO DOS </div>
<div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CONTENIDO TRES </div>
</div>

CONTENIDO UNO

CONTENIDO DOS

CONTENIDO TRES

Hasta ahí son rectángulos de colores pero el contenido puede ser cualquier cosa; por ejemplo textos y si estos textos no tienen fondos de color, también se superpondrán:

este es un texto

y este es otro

Mezclamos entonces varias propiedades y si es necesario, pueden verse algunas ideas básicas en webdesignerdepot.com.