Propiedades Basicas CSS: Posicionar Elementos

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Lo que aprenderemos en este tutorial son propiedades que afectan a la posición de las cosas. Es simple y bastante útil por ejemplo si quieres superponer un texto sobre una imagen, quieres que ciertos elementos se vean como un bloque u otras cuestiones similares.


Para empezar, la forma más básica de mover un elemento es utilizando como referencia los márgenes del elemento. En ese caso, debes usar las siguientes propiedades:
margin-top (borde superior)
margin-right (borde derecho)
margin-bottom (borde inferior)
margin-left (borde izquierdo).
Estas propiedades se llenan con valores en píxeles, porcentajes o em. Entonces, por ejemplo, si quieres subir a un texto 100px para que se superponga a una imagen que está arriba del texto, puedes colocar el texto en un div, darle un id o un class, llamarlo desde el CSS y colocarle margin-top: -100px;.


Otra forma de mover elementos es con la propiedad position. Ésta propiedad te permitirá que luego, con otras propiedades, ubiques un elemento en absolutamente cualquier lugar. Acepta los valores relative (cambia la ubicación con respecto a su lugar original), fixed (el elemento queda fijo en un lugar de la ventana) y absolute (el elemento queda fijo en un lugar de tu página). Una vez que decides qué tipo de position vas a usar, ubicas al elemento con las propiedades top (arriba), right (derecha), bottom (abajo) y left (izquierda), que se miden en píxeles, porcentajes o em, y significaran diferentes cosas dependiendo del position que uses.

El position normal de las cosas es llamado static - es el position que suelen tener los elementos por defecto. Con un position: relative; esas propiedades corresponderán a los bordes del elemento y funcionarán igual que margin-top, margin-right, margin-bottom y margin-left. La diferencia principal radica en que el elemento seguirá ocupando el espacio en el que estaba originalmente (si era un cuadrado de 100x100px, pues te quedará un hueco de 100x100px). Con un position: fixed; esas propiedades corresponderán al los bordes de la ventana del explorador, por lo que si pones top: 0px; y left:0px; el elemento estará pegado a la esquina superior izquierda del explorador, y cuando bajes por la página se quedará allí. Con un position: absolute; el elemento se moverá con respecto a los bordes del primer elemento que le rodee cuyo position no sea static. Es decir, supongamos que le queremos dar un posicionamiento absoluto a una imagen. Esa imagen está dentro de muchas cajas, pero solo una de ellas tiene position: relative; (o fixed, o absolute). En ese caso, si colocas top: 0px; left: 0px; la imagen se pegará al borde superior izquierdo de esa caja en particular.

Si quieres jugar y experimentar con estas propiedades, te recomiendo usar jsfiddle.net.
Cualquier dato que sepas que falte o consulta que quieras hacer, deja un aviso aquí ^^