JMiur [E]

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

21 comentarios:

Gem@  

Estas entradas son las que me gustan a mí :D

Responder
Graciela  

Excelente Jmiur! besitos!

Responder
JMiur  

Diviértanse :D

Responder
FalconFix  

Master saludos, despues de mucho mucho tiempo talvez ni recuerdes ya a este alumno tuyo tan ingrato.

Master necesito su ayuda me hackearon y eliminaron varios blogs, como hago master para recuperarlos me costaron mucho trabajo y esfuerzo; la pena me embarga no se que hacer, la verdad es que estoy desesperado ayudame Gran Jmiur.

Responder
FalconFix  

Master Jmiur el problema es mas complejo de lo que parece si hubiesen eliminado el blog se que exisistiria la opcion de "Recuperar este blog" , pero de los blogs ninguno tiene esa opción, simplemente es como si hubiesen transferido la administracion a otra cuenta y desde alli lo hubiesen eliminado. O Google por equivicacion haría eso guaauuu ya no se ni que pensar solo quiero recuperarlos Master.

Responder
JMiur  

No es mucho lo que pueda decir sobre eso; vas a tener que comunicarte con Blogger e intentar que ellos resuelvan el problema o expliquen la situación; puedes hacerlo desde el formulario que hay en la ayuda misma o sino, agregando el pedido en los grupos de ayuda de Blogger que es la manera más segura de obtener alguna clase de respuesta.

Responder
tomat  

Hola, JMiur. Tengo una duda que no sé si tiene mucho que ver con esta nota, pero tampoco sé muy bien dóndeo ponerla. Se trata de que he detectado que algunos blogs que usan las plantillas "nuevas" de blogger se ven mal en un iPad: sale todo bien excepto la imagen de fondo que normalmente se ve grande y se desplaza todo el contenidon del blog sobre ella en todos los navegadores, incluido Safari para Windows, pero en el iPad no, sale la imagen más pequeña arriba y se desplaza igual que el contenido. He leído por algún lado que el iPad con IOS4 tenía alguna incompatibilidad con el parámetro position, pero no estoy muy seguro de que sea eso (y tengo IOS5). Sabes tú algo del tema y sobre todo si hay alguna solución para que se pueda ver en el iPad esos blogs igual que en navegadores normales.?
De hecho con otro navegador en el iPad (Diigo, antes iChrome) se ve igual de mal que con el Safari del iPad.
Algún blog de ejemplo: mustomat.com

JMiur  

Lo siento, tomat; no tengo la menor idea de cómo se ve un sitio en un móvil ni cómo funciona. No los uso y me aprece que aún les falta un largo camino por recorrer para que lleguen a ser compatibles.

tomat  

Muchas gracias de todos modos. La verdad es que yo tampoco creía mucho en la utilidad de las tabletas, pero tras probarla un poco me rindo a la evidencia de su comodidad porque para navegar por Internet como usuario no hay color entre hacerlo desde el sofá, como quien lee una revista y tener que sentarte con un PC por muy liviano que sea. Y la verdad es que por lo que llevo visto su compatibilidad es bastante buena y salvo el problema que te he comentado, todo lo demás que sueles publicar se ve perfectamente.

Responder
tomat  

JMiur, he hecho más pruebas y parece que el tema está relacionado con la resolución del iPad y la forma en que interpreta el parámetro background-size. Este valor no está en la plantilla pero he hecho pruebas poniéndolo y si le doy valores fijos en px o en % sí sale identico en iPad que en PC. Pero si le pongo valor auto (que es lo mismo que no poner el parámetro), en PC pone la imagen a su tamaño original, pero en iPad la pone más pequeña como haciendo referencia a la máxima resolución del iPad. Con valor contain ambos lo hacen teóricamente bien, pero salen cosas muy distintas porque el PC se limita con las dimensiones reales de la ventana pero el iPad parece aplicar tan solo limitacion horizontal. Y con valor cover tampoco responden igual, el PC llena la ventana y el iPad parece querer llenar su máxima resolución.
Además he verificado que efectivamente el iPad ignora el parámetro fixed para el background y lo trata igual que si pones scroll.
Bueno, perdona todo el rollo pero es para ver si te animas y nos ilustras algo más sobre el parámetro background-size que he visto que tienes ya una nota antigua pero que no funciona bien con los navegadores actuales que parece que ya no necesitan prefijos para esto.

JMiur  

Ahi cambié la vieja entrada a la que haces referencia. Los prefijos suelen seguir funcionando igual en muchos casos pero, en este no.

Hay una entrada más reciente pero nada agrega al tema ya que la forma en que funciona, con o sin prefijos, es la misma.

Responder
osce  

Gran articulo, muchas gracias :D

Responder
Karloz Motta  

Muchas gracias por tu aporte, me sacó de un super lío.. Saludos desde México.

Responder
Eze  

Hola, tenog una consulta,ami lo que me pasa es que se me superpone las entradas y no se porque,si te fijas en mi blog de pruebas se ve, estuve probando esto que pusiste pero sigue igual...cuando el cambio a position absolute, y le agrego valores se me superpone mas, gracias!

JMiur  

No es un problema de CSS. Seguramente, tienes una etiqueta mal cerrada en un post o en la plantilla misma y por eso se descompagina todo y los posts no se superponen sino que en el código fuente se ven uno adentro del otro.

Responder
Alejandra Martinez  

OYES DISCULPA SI QUIERO QUE ESTE UNA IMAGEN ABAJO
Y UN ENLACE ARRIBA ES ASI O COMO ES
FELICIDAADES POR TU PAGINA MUY BUENA

JMiur  

Depende. No hay manera de responder eso sin ver cuál es el ejemplo concreto al que te refieres.

Responder
Arteria  

Gracias

Responder
Fafa VidayObra  

Gracias, otra vez tu página me sirvió

Responder
Ganar Dinero En Internet  

Estupendo tutorial ya se como ubicar los divs seria bueno que publiques un tutorial en donde explicaras como poner un div dentro de parrafo o texto

JMiur  

No se deben colocar etiquetas DIV dentro de etiquetas P.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR