Superponiendo cosas con CSS by vagabundia

Fuente: vagabundia.blogspot.com

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 yabsolute. 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>
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>
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>
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>
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>
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
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>
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s