Posicionamiento de elementos en CSS

Autor: | Última modificación: 9 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

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 en 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.

Posicionamiento estático de elementos en CSS

Relative o relativa

El valor relative o posición relativa 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 a su posición original. Lo hace usando las etiquetas <top>, <bottom>, <left> y <right>.

Posicionamiento relativo de elementos en CSS

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 en 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.

Posicionamiento absoluto sin ancestros en CSS

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.

Posicionamiento absoluto con ancestros en CSS

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.

Posicionamiento fijo de elementos en CSS

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!