A grandes rasgos, y como aprendimos en temas anteriores, si tenemos varios elementos en línea (uno detrás de otro) aparecerán colocados de izquierda hacia derecha, mientras que si son elementos en bloque se verán colocados desde arriba hacia abajo. Estos elementos se pueden ir combinando y anidando (incluyendo unos dentro de otros), construyendo esquemas más complejos.
Este flujo de posicionamiento se enmarca dentro de lo que se denomina posicionamiento estático (static), donde todos los elementos aparecen con un orden natural. Este es el modo por defecto ** en que un navegador renderiza una página.
Sin embargo, existen otros modos alternativos de posicionamiento, que podemos cambiar mediante la propiedad position con los siguientes valores:
| Valor | Significado |
|---|---|
| static | Posicionamiento estático. Utiliza el orden natural de los elementos HTML. |
| relative | Posicionamiento relativo. Los elementos se mueven ligeramente en base a su posición estática. |
| absolute | Posicionamiento absoluto. Los elementos se colocan en base al contenedor padre. |
| fixed | Posicionamiento fijo. Idem al absoluto, pero aunque hagamos scroll no se mueve. |
Si utilizamos un modo de posicionamiento diferente al estático (absolute, fixed o relative), podemos utilizar una serie de propiedades para modificar la posición de un elemento. Estas propiedades son las siguientes:
| Propiedad | Valor | Significado |
|---|---|---|
| top: | auto | tamaño | Empuja el elemento una distancia desde la parte superior hacia el inferior. |
| bottom: | auto | tamaño | Empuja el elemento una distancia desde la parte inferior hacia la superior. |
| left: | auto | tamaño | Empuja el elemento una distancia desde la parte izquierda hacia la derecha. |
| right: | auto | tamaño | Empuja el elemento una distancia desde la parte derecha hacia la izquierda. |
| z-index: | auto | nivel | Ordena en el eje de profundidad, superponiendo u ocultando. |
Antes de pasar a explicar los tipos de posicionamiento, debemos tener claras las propiedades top, bottom, left y right, que sirven para mover un elemento desde la orientación que su propio nombre indica hasta su extremo contrario. Esto es, si utilizamos left e indicamos 20px, estaremos indicando mover desde la izquierda 20 píxeles hacia la derecha.
Pero pasemos a ver cada tipo de posicionamiento por separado y su comportamiento:
Si utilizamos la palabra clave relative activaremos el modo de posicionamiento relativo, que es el más sencillo de todos. En este modo, los elementos se colocan exactamente igual que en el posicionamiento estático (permanecen en la misma posición), pero dependiendo del valor de las propiedades top, bottom, left o right variaremos ligeramente la posición del elemento.
Ejemplo: Si establecemos
left:40px, el elemento se colocará 40 píxeles a la derecha desde la izquierda donde estaba colocado en principio, mientras que si especificamosright:40px, el elemento se colocará 40 píxeles a la izquierda desde la derecha donde estaba colocado en principio.
Si utilizamos la palabra clave absolute estamos indicando que el elemento pasará a utilizar posicionamiento absoluto, que no es más que utilizar el documento completo como referencia. Esto no es exactamente el funcionamiento de este modo de posicionamiento, pero nos servirá como primer punto de partida para entenderlo.
Ejemplo: Si establecemos
left:40px, el elemento se colocará 40 píxeles a la derecha del extremo izquierdo de la página. Sin embargo, si indicamosright:40px, el elemento se colocará 40 píxeles a la izquierda del extremo derecho de la página.
Como mencionaba anteriormente, aunque este es el funcionamiento del posicionamiento absoluto, hay algunos detalles más complejos en su modo de trabajar. Realmente, este tipo de posicionamiento coloca los elementos utilizando como punto de origen el primer contenedor con posicionamiento diferente a estático.
Por ejemplo, si el contenedor padre tiene posicionamiento estático, pasamos a mirar el posicionamiento del padre del contenedor padre, y así sucesivamente hasta encontrar un contenedor con posicionamiento no estático o llegar a la etiqueta <body>, en el caso que se comportaría como el ejemplo anterior.
Por último, el posicionamiento fijo es hermano del posicionamiento absoluto. Funciona exactamente igual, salvo que hace que el elemento se muestre en una posición fija dependiendo de la región visual del navegador. Es decir, aunque el usuario haga scroll y se desplace hacia abajo en la página web, el elemento seguirá en el mismo sitio posicionado.
Ejemplo: Si establecemos
top:0yright:0, el elemento se colocará justo en la esquina superior derecha y se mantendrá ahí aunque hagamos scroll hacia abajo en la página.
Existen otros valores de position como sticky, page o center, sin embargo, su soporte e implementación aún es muy temprana y no se sabe si su funcionalidad terminará ofreciéndose desde los diferentes navegadores.
Es interesante conocer también la existencia de la propiedad z-index, que establece el nivel de profundidad en el que está un elemento sobre los demás. De esta forma, podemos hacer que un elemento se coloque encima o debajo de otro.
Su funcionamiento es muy sencillo, sólo hay que indicar un número que representará el nivel de profundidad del elemento. Los elementos un número más alto estarán por encima de otros con un número más bajo, que permanecerán ocultos detrás de los primeros.
Nota: Los niveles
z-index, así como las propiedadestop,left,bottomyrightno funcionan con elementos que estén utilizando posicionamiento estático. Deben tener un tipo de posicionamiento diferente a estático.