http://vagabundia.blogspot.com/2011/04/superponiendo-cosas-con-css.

html

Superponiendo cosas con CSS

Toda etiqueta es un rectngulo 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 rectngulos y hacer que uno se muestre
encima del otro. Bsicamente, 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 ms simple es que el contenedor tenga
el valor relative y el contendio el valor absolute:
<div style="position: relative;">
<div style="position: absolute;"> HOLA </div>
</div>

HOLA
As como est, no parece haber diferencias, si le quitamos as propiedades, se ver igual porque nos falta algo
ms, agregarle las que nos permitirn 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):
<div style="position: relative;">
<div style="position: absolute; left: 30px; top: 50px;"> HOLA </div>
</div>

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):
<div style="position: relative;">
<div style="position: absolute; right: 30px; bottom: 50px;"> HOLA </div>
</div>

HOLA
De este modo, bien podramos ubicar ms 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 rectngulos; 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 nmero, y el que tenga el nmero ms alto, se mostrar por
encima sin importar la forma en que est escrito el cdigo; 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, ponindole 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 rectngulos de colores pero el contenido puede ser cualquier cosa; por ejemplo textos y si estos
textos no tienen fondos de color, tambin se superpondrn:

este es un texto

y este es otro

Mezclamos entonces varias propiedades y si es necesario, pueden verse algunas ideas bsicas en
webdesignerdepot.com.
<style>
#superponer {
position: relative;
text-align: center;}
#superponer h5 {
color: #D0D9E1;
font-family: Georgia;
font-size: 140px;
letter-spacing: -6px;
margin: 0;
opacity: .9;
padding: 0;
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
#superponer h6 {
color: #4682B4;
font-family: Verdana;
font-size: 60px;
left: 120px;
letter-spacing: 20px;
margin: 0;
padding: 0;
position: absolute;
top: 20px;
}
#superponer h6 span {
color: #F66;
font-family: Times New Roman;
font-size: 100px;
font-style: italic;
text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
-moz-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);zoom:2;
}
</style>
<div id="superponer">
<h5> un ttulo </h5>
<h6> eje <span> m </span> plo </h6>
</div>

un ttulo