Uno de los temas más complejos de CSS es aprender a posicionar elementos. Para ello hay que descubrir como funcionan los diferentes tipos de posicionamiento CSS.

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:

Posicionamiento relativo

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 especificamos right:40px, el elemento se colocará 40 píxeles a la izquierda desde la derecha donde estaba colocado en principio.

Posicionamiento absoluto

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 indicamos right: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.

Posicionamiento fijo

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:0 y right:0, el elemento se colocará justo en la esquina superior derecha y se mantendrá ahí aunque hagamos scroll hacia abajo en la página.

Otros modos de posicionamiento

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.

Profundidad (niveles)

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.

z-index CSS

Nota: Los niveles z-index, así como las propiedades top, left, bottom y right no funcionan con elementos que estén utilizando posicionamiento estático. Deben tener un tipo de posicionamiento diferente a estático.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).