domingo, 10 de abril de 2011

Superponiendo cosas con CSS

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:
<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 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):
<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 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.
<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 título </h5>
<h6> eje <span> m </span> plo </h6>
</div>

un título
ejemplo

No hay comentarios:

Publicar un comentario