Estructurar una página web es, en cierta medida, ubicar elementos en la pantalla. En este post te enseñaremos cómo utilizar la propiedad position a la hora de determinar el posicionamiento de elementos en CSS y las distintas opciones con las que cuenta.
Posicionamiento clásico
Puede que nunca hayamos oído hablar de posicionamiento de elementos en CSS. Esto sucede porque no siempre tenemos que determinar la posición de nuestros elementos HTML desde el código. De hecho, los navegadores tienen una forma automática de leer nuestro código y posicionar elementos en la pantalla.
Hay muchas maneras de sobrescribir esta forma de situar elementos del navegador. En este post te presentamos lo que llamamos «posicionamiento clásico», un método para situar elementos en la pantalla a voluntad. En contraposición al uso de FlexBox o CSS Grid, el posicionamiento clásico nos permite sobrescribir lo que el navegador hace por defecto con tan solo unas cuantas reglas CSS.
A la hora de hablar de posicionamiento de elementos en CSS, debemos tener en cuenta la propiedad position. Con esta propiedad podemos cambiar cómo se comporta un elemento a la hora de que el navegador lo sitúe en la página web. Esto nos da la posibilidad de crear estructuras más complejas en nuestros diseños y determinar la posición de elementos con relación a otros. A continuación, te presentamos los cuatro valores que podemos insertar en esta propiedad y cómo funcionan.
Static o estático
El valor static o valor estático es el valor por defecto de la propiedad position. Este valor quiere decir que el elemento no tiene un posicionamiento específico y que el navegador usará su sistema automático para ubicarlo. Dicho sistema dependerá de si el elemento tiene un display block, inline o block-inline.
Relative o relativa
El valor relative o position relative en html nos permite posicionar un elemento como static, es decir, con su posicionamiento automático, y luego desplazarlo dándole una posición a la izquierda, arriba, abajo o derecha. Esto es, el valor relative cambia la posición del elemento en relación con su posición original. Lo hace usando las etiquetas <top>, <bottom>, <left> y <right>.
Como puedes ver en el diagrama anterior, en el que el cuadro gris representa la posición original, los demás elementos no se mueven con el valor relative. Es decir, el navegador reserva el espacio de la posición original del elemento a pesar de que este se mueva a los lados.
Absolute o absoluta
El valor absolute o posición absoluta posiciona el elemento HTML usando como referencia al ancestro más cercano que tenga un posicionamiento diferente al static. Este valor puede llevar a confusión, porque tendemos a creer que el elemento se posiciona con relación al viewport.
En realidad, esto solo sucede si el elemento HTML no tiene un ancestro con una posición definida. En este caso, como podemos ver en el diagrama siguiente, el elemento se posicionará usando como referencia la esquina superior izquierda del viewport. Es decir, si le agregamos un margen a la izquierda, el elemento utilizará el borde izquierdo del viewport como referencia para mover el elemento.
En el caso de que el elemento HTML tenga un ancestro con un posicionamiento diferente a static, el elemento se posicionará usando como referencia su padre más cercano. Por ejemplo, si tenemos un párrafo dentro de un div que tiene una posición relativa determinada, el párrafo usará la posición de div como referencia, pues es su ancestro más cercano.
En el diagrama siguiente, puedes ver que el elemento HTML (cuadro naranja) usará como referencia la esquina superior izquierda de su ancestro (cuadro gris) para determinar su posición frente a los bordes de arriba, abajo, izquierda y derecha.
Fixed o fija
El valor fixed o posición fija es una variante del valor absoluto. Su diferencia principal frente a otros valores es que es independiente a la barra de desplazamiento. Esto quiere decir que, aunque nos desplacemos por la página web, el elemento HTML con este valor se quedará fijo en su lugar, pues su posición es inamovible.
La posición fija es muy útil para elementos que queremos que estén presentes en todo momento, como lo sería una barra de navegación, un botón de redes o un anuncio.
¿Te animas a seguir aprendiendo?
Ahora que sabes sobre las distintas opciones que tenemos para determinar el posicionamiento de elementos en CSS, ¡es hora de que pongas en práctica tus conocimientos! Si, además de aprender sobre el posicionamiento de elementos en CSS y otros aspectos de CSS, quieres aprender mucho más sobre desarrollo web y ponerlo en práctica creando tu propia página web, Keepcoding tiene el bootcamp perfecto para ti.
En el Desarrollo Web Full Stack Bootcamp aprenderás lo necesario para cumplir tu sueño de ser un desarrollador web con nuestra metodología que combina la teoría con la práctica. ¡Anímate a seguir aprendiendo y matricúlate!
