JMiur [E]

En CSS, las propiedades left y top controlan la posición de los elementos y con ellas podemos modificar los valores que se establecen por defecto. Para que funcione, sólo se requiere una cosa: debe agregarse la propiedad position. Esta, puede tener el valor static (ninguna en especial), absolute (se refiere a la posición con respecto al elemento contenedor) o relative que indica la posición relativa a la que ocupa el elemento en si mismo y que, por defecto es left:0 y top:0.

Es más simple de lo que parece. Veamos este código:
<img src="imagen1"/>
<div style="background-color:LightSteelBlue;color:black;">contenido</div>
Mostará la imagen arriba y un recuadro con texto abajo de ella:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

La posición se dice relativa al lugar en donde el elemento se ubica por defecto y es su coordenada superior izquierda. Quiere decir que si queremos que, en lugar de aparecer donde se muestra normalmente, la queremos poner más abajo y a la izquierda, bastaría establecer esas propiedades con el valor respectivo:


El código sería este:
<img style="position: relative; left: 100px; top: 80px;" src="imagen1"/>
<div style="background-color: LightSteelBlue; color: black;">contenido</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

Establecimos la posición de IMG como relativa para poder "moverla" pero, ¿qué pasa si el DIV también tiene la propiedad position?:
<img style="position: relative; left: 100px; top: 80px;" src="imagen1"/>
<div style="position: relative; background-color: LightSteelBlue; color: black;">contenido</div>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

Si ambos elementos tienen la propiedad relative, se muestran como lo harían normalmente, siguiendo el orden en que fueron creado: se pone la imagen, se mueve, se pone el bloque de texto, como la imagen está abajo, queda semi-tapada. Si sólo el elemento que vamos a re-posicionar posee esa propiedad relative, tiene "prioridad" sobre los otros y, por lo tanto, aunque se haya dibujado primero, aparece en primer plano, por delante del texto.

El valor puede ser expresado en diferentes unidades (cm, mm, in, pt, pc, px, em, ex) o como porcentajes (%) y pueden ser valores positivos o negativos.

3 comentarios:

ymmot  

:-) ... buenos dias, tardes, noches.

... muy interesante el tema,... en su dia aplique bastante lo de absolute y relative junto con z-index para montar una serie de articulos en el Blog que tenia de Jazz.

Posteriormente lo pase todo al Blog Actual,... teneis claros ejemplos "mirando el codigo fuente" en los articulos de la seccion especial "Breve Historia del Jazz",... por ejemplo alguno muy elaborado podria ser el de "Los instrumentos del Jazz",... o tambien el de "Las rosas del Jazz cantan".

... la verdad es que lleva mucho trabajo hacerlo a mano,... aunque luego los resultados quedan "muy bonitos"

El "truco" por llamarlo asi,... es crear una caja DIV relative,... la cual contendra el resto de cajas DIV pero estas en absolute,... con lo cual conseguimos que las cajas internas se posicionen en las coordenadas que queramos y dentro de la caja principal.

Salu2 ymmot ;-)

... please,... tenias en algun sitio algo sobre "probar el blog en otros navegadores" si no recuerdo mal,... pero no acabo de encontrar tu articulo,... es que estoy usando "IE6" y queria ver como "salen las cosas" en otros navegadores. Gracias.

Responder
Okrut  

Muy útil cuando se trata de hacer que el blog luzca mejor, gracias.

Por cierto, felicidades JMiur, ahora Vagabundia hasta es anunciada en Telurica TV, aquí te dejo el link: Vagabundia en Telurica TV 313

Responder
JMiur  

Así es ymmot, absolute es la posición con respecto al elemento contenedor.

Todas esas propiedades no sólo sirven para hacer efectos sino que junto con float son esenciales para la creación de las plantillas y su buen funcionamiento.

Okrut ... he quedado alelado y con la boca abierta de par en par :D
:)
:D
:)
No, no puedo dejar de sonreir. Gracias por el aviso :D

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