Posicionamiento CSS

Saber posicionar los elementos en páginas web es fundamental para presentar la información al usuario de forma precisa. Al realizar un posicionamiento efectivo, la interfaz del sitio web será de fácil acceso porque la página dispondrá únicamente de los recursos necesarios para su funcionamiento, haciendo que el contenido se muestre de manera rápida, agradable e intuitiva. Es por eso que en el presente artículo se explica qué es el Posicionamiento CSS y cómo usarlo en las páginas web.

¿En qué consiste el posicionamiento CSS?

Al momento de crearse una páginas web, los elementos HTML son posicionados por defecto en un flujo natural también llamado posicionamiento estático, donde únicamente se considera si el elemento es de línea para posicionarlo en el espacio que necesita o bien si el elemento es de bloque para que ocupe todo el ancho de la página.

Entonces, ¿cómo ubicar los elementos de una manera diferente a la que el navegador usa por defecto?  Para conseguir mover los elementos de nuestra página web a voluntad usamos el posicionamiento clásico, que consiste en usar la propiedad position en nuestro CSS. Ello permite usar cualquier de los siguientes valores: static, relative, absolute, fixed o sticky para ubicar nuestro elemento en la posición que deseamos. Cabe mencionar que el valor static es la posición que usa nuestro documento por defecto.

Una vez que se usa cualquiera de los valores que ofrece la propiedad, position aparte de static, se habilitan las siguientes propiedades: top, bottom, left, right, que van a permitir el movimiento en el eje X o Y, respectivamente.

A continuación, se explica en qué consisten cada uno de los valores que tiene la propiedad position y la manera en la cual se pueden usar en las páginas web.

Paso a paso

Relative

El posicionamiento relative permite desplazar el elemento de la página web en el eje X con las propiedades left y right o bien moverlo en el eje Y con otras propiedades: bottom y top.

Cabe mencionar que el valor relative no toma en cuenta la posición del contenedor para desplazar el elemento, sino que considera la posición del elemento como tal. Asimismo, el elemento siempre mantiene sus dimensiones; esto quiere decir que los demás elementos siempre consideran la existencia del elemento en su posición original.

A continuación, se muestra un ejemplo. Antes de usar la propiedad position, el renderizado de los elemento luce así:

See the Pen Sin posicionamiento Relative by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Luego de usar la propiedad position, se habilitan las propiedades top, bottom, left y right, permitiendo ubicar el elemento en la posición deseada. Como se observó, no es necesario agregar una position al contenedor.

See the Pen Position Relative by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Absolute

El posicionamiento absolute permite desplazar al elemento en el eje X o Y, pero a diferencia del relative, toma como referencia la posición del contenedor para realizar el desplazamiento. Esto quiere decir que el contenedor debe tener un posicionamiento definido (que usualmente es el relative) para que sea tomado como referencia.

En este tipo de posicionamiento, el elemento pierde sus dimensiones en su posición original, es decir, los otros elementos consideran que el elemento no existe y ocupan su espacio. En cuanto a su punto de referencia, se busca el ancestro contenedor más cercano con un posicionamiento relative que, de no haberlo, usa la referencia de body.

A continuación, se muestra un ejemplo de lo anteriormente mencionado:

See the Pen Sin posicionamiento absolute by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Como se observa, los elementos se ubican de acuerdo con el flujo natural esperado.

Usando la posición absolute y teniendo el contenedor con position relative, el elemento se posiciona de la siguiente manera:

See the Pen Posicionamiento absolute by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Como puede verse, la referencia que se toma para mover el elemento es el contendor y los demás elementos siempre mantienen su posición, puesto que consideran que el elemento no existe.

Fixed

El posicionamiento fixed toma como referencia el viewport para el desplazamiento de elemento y así ubicar a éste de manera fija, inamovible. Se usa para que el elemento mantenga su posición fija, independientemente del desplazamiento que el usuario realice en la página de arriba o abajo.

Un ejemplo del uso de la posición fixed son los menús en las páginas web. Ellos se mantienen fijos a pesar del desplazamiento que el usuario realice en la página.

See the Pen Posicionamiento fixed by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Sticky

El posicionamiento sticky es similar al comportamiento del posicionamiento relative y fixed. Inicialmente, es relativo hasta que el elemento alcanza un valor determinado y se comporta como fijo. En este caso, las propiedades top, bottom, left y right se usan para definir el momento en el cual el elemento debe comportarse como fijo.

Es importante comprender que el elemento con la propiedad sticky va a depender del elemento contenedor para  quedar como elemento fijo mientras el usuario se desplaza. Si el contenedor no tiene una altura determinada, la propiedad sticky no tendrá efecto.

A continuación se muestra un ejemplo del posicionamiento sticky:

See the Pen Posicionamiento Sticky by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

¡Bien! Ahora ya sabes cómo posicionar los elementos según desees en tu documento. Recuerda, hay otras formas para realizar posicionamiento que puedes explorar para tener un completo entendimiento de las maneras de optimizar tu página web.

En los siguientes artículos, abordaré el posicionamiento con Flexbox y Grid.

¡Todo el éxito!