Además del anteriormente comentado FIXED, los otros valores interesantes para el atributo POSITION, son ABSOLUTE y RELATIVE. Con ellos podemos conseguir que un elemento se muestre en un lugar distinto del que le correspondería. Como este concepto es un poco farragoso y explicarlo con palabras resulta bastante espeso, mejor damos unas explicaciones gráficas.
Empezaremos por un posible valor más, que todavía no hemos mencionado y que es STATIC. No reviste especial interés porque es el que llevan por defecto todos los elementos HTML. Tanto si se indica un POSITION:STATIC; como si no se coloca ningún atributo de posición, el elemento se colocará en nuestra pantalla justo a continuación del último elemento mostrado. Lo que hasta ahora hemos considerado normal o en su sitio.
En el ejemplo, colocamos un texto, una imagen y otro texto y en ese mismo orden. Suponemos que no hemos insertado ningún salto de línea, etiqueta de párrafo, o similar.
<span style="text-align: left;">Juego de ingenio para romperse la cabeza <a href="http://singenio.com/" title="S*Ingenio"><img style="position: static;" src="http://i252.photobucket.com/albums/hh27/olomansan/88x31.gif" /></a> ¿Hasta dónde podrás llegar?</span>
Juego de ingenio para romperse la cabeza 
¿Hasta dónde podrás llegar?
¿Hasta dónde podrás llegar?Ejemplo 1
(*) Aprovechamos para hacernos algo de publi.
(*) Aprovechamos para hacernos algo de publi.
ABSOLUTE funciona prácticamente igual que FIXED, puesto que sitúa los elementos a la distancia del margen que se indique. Pero hay una sutil e importante diferencia... Mientras que TOP/BOTTOM - RIGHT/LEFT estaban referenciados con FIXED a los límites de nuestra ventana o pantalla, con ABSOLUTE las referencias son los márgenes del bloque contenedor del elemento. Si no hay ninguno específico, se considera como contenedor el BODY.
En el siguiente ejemplo el DIV que forma el rectángulo rojo es la referencia, por cual, cuando indicamos un valor absoluto de BOTTOM:31PX; y LEFT:31PX; los desplazamientos se hacen con respecto a los márgenes de ese DIV.
<span style="text-align: left;">Juego de ingenio para romperse la cabeza <a href="http://singenio.com/"><img style="position: absolute; bottom: 31px; left: 31px;" src="http://i252.photobucket.com/albums/hh27/olomansan/88x31.gif" /></a> ¿Hasta dónde podrás llegar?</span>
Juego de ingenio para romperse la cabeza ¿Hasta dónde podrás llegar?
¿Hasta dónde podrás llegar?Ejemplo 2
De esta manera, el botón NO se nos va abajo y a la izquierda de la pantalla como pasaría con FIXED, sino que se coloca a 31px del borde inferior del recuadro y a otros 31px de su lado izquierdo.
Es importante tener en cuenta que para que este atributo funcione como queremos, el contenedor del elemento debe estar fijado a su vez con FIXED, ABSOLUTE o RELATIVE. Como veremos ahora, salvo que se quiera también sacar el rectángulo rojo del flujo normal, lo correcto sería usar POSITION:RELATIVE; sin parámetros, que es lo mismo que dar instrucciones para que se quede en su sitio.
Otra cosa a tener en cuenta, es que ABSOLUTE saca totalmente la imagen del flujo de código, por lo que la segunda frase se escribe a continuación de la primera. Si el texto coincidiera con la imagen, esta última simplemente se solaparía por encima.
RELATIVE nos sirve también para desplazar elementos, pero en este caso, en relación al lugar dónde le correspondería estar siguiendo el flujo de HTML. Tal que así...
<span style="text-align: left;">Juego de ingenio para romperse la cabeza <a style="border: 1px dashed rgb(204, 204, 204); width: 88px; height: 31px;" href="http://singenio.com/" title="S*Ingenio"><img style="position: relative; top: 31px;" src="http://i252.photobucket.com/albums/hh27/olomansan/88x31.gif" /></a> ¿Hasta dónde podrás llegar?</span>
Juego de ingenio para romperse la cabeza ¿Hasta dónde podrás llegar?
¿Hasta dónde podrás llegar?Ejemplo 3
Observareis que con respecto a la ubicación normal (primer ejemplo gráfico), la esquina superior izquierda del botón, se ha desplazado 31 pixels hacia abajo. Leyendo la instrucción literalmente, hemos marcado el punto inicial (0,0) en el lugar dónde la imagen debería ir normalmente y desde ahí hemos contado 31 pixels, dejando por arriba de ella (TOP) ese espacio. Ahora la imagen la tenemos a partir del punto (0,31)
(*) La línea discontinua, puesta de guía para la explicación, no marca con exactitud el lugar inicial.
Pero ¿qué ha pasado con el segundo texto al quitar la imagen"? La respuesta es NADA. El espacio que ocupaba la imagen sigue reservado y por tanto el resto de elementos no cambian de posición. La segunda frase no se recoloca a la derecha de la primera y tampoco se reubica después de la imagen. Distinto sería si tuviera también otro atributo de posición, pero como no es así se considera STATIC.
Por tanto, hemos conseguido que la imagen realmente flote dónde nosotros queremos sin alterar el resto del contenido. Aunque algo desafortunada, flotar es la mejor expresión que se me ocurre para explicar el efecto, ya que el espacio natural de la imagen sigue reservado y esta se superpondrá con aquello que se encuentre por el camino, salvo que un Z-INDEX le indique lo contrario. Pero ese es otro tema...
Si utilizáramos BOTTOM, la imagen se desplazaría hacia arriba porque los pixels indicados los dejaríamos por debajo.
<span style="text-align: left;">Juego de ingenio para romperse la cabeza <a href="http://singenio.com/" style="border: 1px dashed rgb(204, 204, 204); width: 88px; height: 31px;"><img style="position: relative; bottom: 31px;" src="http://i252.photobucket.com/albums/hh27/olomansan/88x31.gif" /></a> ¿Hasta dónde podrás llegar?</span>
Juego de ingenio para romperse la cabeza ¿Hasta dónde podrás llegar?
¿Hasta dónde podrás llegar?Ejemplo 4
Y con esto último, ya empezamos a ver una especial utilidad de usar RELATIVE en el posicionamiento de elementos y es que ¡nos podemos salir del contenedor sin problemas!. La diferencia con ABSOLUTE es que este último fija los elementos con respecto a la página y RELATIVE lo hace con respecto a un bloque de información. La página (ventana) puede cambiar de tamaño por las distintas resoluciones de los usuarios y eso nos podría crear más de un problema. Sin embargo, los contenedores se pueden definir de tamaño fijo, independientemente de la resolución de la pantalla por lo cual, con RELATIVE, la posición del elemento siempre estará a la misma distancia de su contenedor.
Otra cosa a tener en cuenta es que se pueden usar valores negativos. De esta manera para llegar a cualquier punto, podemos usar también la referencia opuesta, siempre que cambiemos el signo de la distancia en pixels. Esto en cristiano, quiere decir que, por ejemplo, TOP:31PX; produce el mismo efecto que BOTTOM:-31PX; y LEFT:-88PX; es lo mismo que RIGHT:88PX;
Añadamos ahora un desplazamiento horizontal al ejemplo 3 para ver también el solapamiento de elementos.
<span style="text-align: left;">Juego de ingenio para romperse la cabeza <a style="position: relative; top: 31px; right: 176px;" href="http://singenio.com/"><img style="position: relative; top: 0px; right: 0px;" src="http://i252.photobucket.com/albums/hh27/olomansan/88x31.gif" /></a> ¿Hasta dónde podrás llegar?</span>
Juego de ingenio para romperse la cabeza ¿Hasta dónde podrás llegar?
¿Hasta dónde podrás llegar?Ejemplo 5
Con el right:176PX; que hemos añadido, estamos indicando que desde la esquina superior izquierda del elemento al punto original, deberán quedar 176px por la derecha. Como podeis ver, lo único que se sigue moviendo es la imagen y esta se superpone sobre el resto de elementos.
Pero bueno, esto no es del todo cierto, porque si habeis sido buenos observadores, os habreis dado cuenta de que en los ejemplos 1, 2, 3 y 4, el enlace está tanto en el espacio reservado de la imagen como en la ubicación desplazada de la imagen. Pasando el puntero por encima se puede comprobar. Esto es porque en esos tres casos, no se ha aplicado ningún desplazamiento al elemento A (enlace) y este se ha quedado en su sitio.
Podría ser útil en alguna ocasión, pero no es lo normal. Así que para solucionarlo, en este último caso (ejemplo 5), se ha desplazado en primer lugar el enlace, aplicando el mismo método que para la imagen y, a continuación, la imagen se ha desubicado mediante otro POSITION:RELATIVE; Sin embargo, como esta última se desplaza respecto de su contenedor (A) y este ya lo tenemos bien colocado, el desplazamiento deberá ser cero (TOP:0PX;LEFT:0PX;) para que la imagen quede justo encima del enlace. Ahora sí que tenemos una imagen descolocada y el enlace correspondiente en el mismo lugar.
No me veo capaz de explicarlo mejor, así que ¡suerte!
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Buena explicación..Y bastante curiosa...Un saludo..
ResponderEliminarwww.elrastreador.com
hola oloman:
ResponderEliminarquiero darle formato a los rotulos de la sidebar, pero cuando lo hago se agregan arriba de los post. quise sacarlos pero no pude, podrias explicarme como hacerlo?
ademas vi el formato de tus rotulos, es una imagen de fondo? o es igual a formatear los rotulos?
saludos, facku
pd: MUY BUEN BLOG!
¿Viste el post sobre el tema?
ResponderEliminarhttp://oloblogger.blogspot.com/2007/08/formatear-rtulos-de-la-barra-lateral.html
Es que como no facilitas tu link, no puedo ver nada.
Hola Oloman. En mi tierra hay un decir para esto: MEJOR EXPLICACIÓN...NI EN PARIS. Lo entendí a la perfección y de echo lo puse en practica con el último código que me enviaste mediante el enlace...En donde aparecía como Fixed...que es solo literal, pues no me quedaba fija y lo cambié por Absolute y allí si Absolutamente en su sitio. Hasta donde mis conocimientos me dieron para llevarla...Esperando que alguien la empuje un poco y logre tapar lo que quiero. Probé con Z-Index, usando como segunda imagen otro banner(haber quien le ganaba a quien) y nada. Vale la pena le eches una mirada, pues tanto imagen...posición y enlace son de tu autoría.
ResponderEliminar! GRACIAS !
Luis, ya te dije que creía que no ibas a poder tapar eso. Quizás lo mejor será que busques otro servicio para crear flash que no te meta nada extraño... o que consigas la versión no-trial ;)
ResponderEliminarJe,Je,Je...Ya lo se.Pero no pierdo la esperanza. Pues la verdad que con los otros creadores de banners de gratis, no había logrado hacer mucha cosa. Gracias por toda tu ayuda.
ResponderEliminarhola otra vez, oloman, en http://paraninosconcabeza.blogspot.com, tengo un problema que no sé con qué tiene que ver, pero empezó cuando puse imágenes fijas, y es que la letra aparece y va aflojando en calidad de lectura, se desvanece un poco en cuanto esperas unos segundos. ¿a qué lo atribuyes, o cómo se puede evitar el problema? de las 4 imágenes dejé solo una. también eliminé el fondo estático que había puesto... intenté cambiando el tipo de letra (ahora tengo cochin), pero no se arregla.
ResponderEliminargracias adelantadas!
Hola Lk. Me he dado una vuelta por tu blog, he esperado un tiempo y no he apreciado lo que cuentas. Yo veo la letra normal.
ResponderEliminarPor otra parte, te comento que si has usado la fuente Cochin, sólo la verán aquellos que la tengan descargada en su ordenador. Yo por ejemplo veo Times... (Ver: Probando fuentes)
waw!!! pues tendré que cambiar la fuente nuevamente. me gustaba la cochin...
ResponderEliminarHOLA gracias por el post. pero Hay algun sistema para que al solapar una imagen entre el sidebar derecho y el main wrap la imagen se solape encima del contenido de main y no debajo?
ResponderEliminarGracias anticipadas
Manel, para eso tienes que ponerle un z-index a cada capa y un mayor número a la que tenga que ir por encima. Pincha en la palabra z-index dentro del post para obtener más información.
ResponderEliminarhola quisiera saber la forma de lograr esto : www.chachivelasco.com (notese el precio en color rojo sobre las imagenes en la imagen de la entrada y al ingresar en ella aparece como detalle no sobre la imagen !) en mi pagina www.123facil.tk muchisimas gracias de antemano
ResponderEliminarsaludos desde Bolivia.
Básicamente se trata de usar position:relative para el contenedor y position:absolute para el precio y luego usar una condición para que en el detalle, ese absolute del precio se cambie a relative. Lo que pasa es que ninguno de los dos sitios es Blogger y no te puedo detallar cómo hacerlo.
Eliminar