Ubicando elementos usando CSS (2ª parte)

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.