CSS: Introducción a la Propiedad position

Angela Sofía Osorio

La propiedad position en CSS controla cómo un elemento se posiciona en el flujo del documento. Los diferentes valores de position afectan el comportamiento de los elementos y determinan si se mueven en función de su posición en el contenedor o en la pantalla.

Los valores más comunes para position son:

static
relative
absolute
fixed
sticky

Comenzaremos desde el más sencillo y básico (static) y avanzaremos hasta sticky.

1. Introducción a la Propiedad position

Los valores más comunes para position son:

static
relative
absolute
fixed
sticky

Comenzaremos desde el más sencillo y básico (static) y avanzaremos hasta sticky.

2. position: static

Definición:
Este es el valor por defecto para todos los elementos. Con position: static, el elemento se posiciona en el flujo normal del documento, lo que significa que no puedes moverlo usando top, right, bottom o left. Los elementos static se apilan uno tras otro en el orden que están en el HTML.

Ejemplo:

<div class="static-box">
  <!-- Esto es un elemento con `position: static`. --> 
</div>

.static-box {
  position: static;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

Contexto:
position: static es útil cuando no necesitas mover un elemento en absoluto y deseas que respete el flujo normal del documento.

3. position: relative

Definición:
Con position: relative, el elemento sigue en el flujo del documento, pero puedes ajustar su posición con las propiedades top, right, bottom y left. Esto significa que se mueve desde su posición original sin afectar la posición de los otros elementos.

Ejemplo:

<div class="relative-box">
  <!--Elemento con `position: relative-->
</div>

.relative-box {
  position: relative;
  top: 20px; /* Se mueve 20px hacia abajo desde su posición original */
  left: 15px; /* Se mueve 15px hacia la derecha */
  width: 200px;
  height: 100px;
  background-color: lightgreen;
}

Contexto:
position: relative es útil para hacer ajustes menores en la posición de un elemento sin sacarlo del flujo normal del documento. También se usa para establecer un “contexto de contenedor” cuando necesitas posicionar otros elementos de forma absoluta dentro de él.

4. `position: absolute`

Definición:
Un elemento con position: absolute se saca del flujo normal del documento y se coloca en relación a su contenedor más cercano que tenga una posición relative, absolute o fixed. Si no encuentra ningún contenedor posicionado, se moverá en relación al <body> o al viewport.

Ejemplo:

<div class="relative-container">
  <div class="absolute-box">
    <!--Elemento con `position: absolute-->
  </div>
</div>

.relative-container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightcoral;
}

.absolute-box {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 50px;
  background-color: lightgoldenrodyellow;
}

Contexto:
position: absolute es ideal para elementos que necesitas colocar en una posición específica dentro de un contenedor. Este tipo de posicionamiento es útil para crear componentes como pop-ups, menús desplegables, o elementos decorativos que deben estar fijos dentro de una sección específica.

5. position: fixed

Definición:
Con position: fixed, el elemento se coloca en una posición fija en la pantalla, sin importar el scroll. Este tipo de elemento permanece visible en la misma posición, sin moverse cuando el usuario hace scroll en la página.

Ejemplo:

<div class="fixed-box">
  <!--Elemento con `position: fixed-->
</div>

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 150px;
  height: 50px;
  background-color: lightseagreen;
  color: white;
  text-align: center;
  padding: 10px;
}

Contexto:
position: fixed es útil para elementos que deben estar visibles en todo momento, como barras de navegación fijas, botones de “volver al inicio” o ventanas emergentes. Dado que estos elementos no se mueven al hacer scroll, asegúrate de no abusar de ellos, ya que pueden ocupar espacio en la pantalla permanentemente.

6. position: sticky

Definición:
Un elemento con position: sticky es una mezcla entre relative y fixed. Al principio, el elemento actúa como si tuviera position: relative, pero cuando se hace scroll y alcanza una posición específica en el viewport, se «fija» y se comporta como position: fixed. Solo funciona si se define una propiedad de desplazamiento como top, right, bottom o left.

Ejemplo:

<div class="sticky-container">
  <div class="sticky-box">
  </div>
  <p>Contenido de ejemplo que se desplaza...</p>
</div>

body{
  height: 200dvh;
}

.sticky-container {
  height: 500px; /* Para poder hacer scroll */
  background: gray;
}

.sticky-box {
  position: sticky;
  top: 20%;
  background-color: lightpink;
  width: 100%;
  padding: 10px;
}

Contexto:
position: sticky es excelente para encabezados de secciones o títulos que deben ser visibles mientras el usuario se desplaza a través de una sección, pero que no necesitan estar siempre visibles. Un caso común es un menú lateral que permanece visible solo hasta el final de su contenedor.

Resumen

static: Posiciona el elemento según el flujo normal del documento, sin opciones de moverlo.
relative: Permite ajustar ligeramente la posición de un elemento sin sacarlo del flujo normal.
absolute: Saca el elemento del flujo normal y lo coloca en relación a su contenedor posicionado.
fixed: Fija el elemento en la pantalla; no se mueve con el scroll.
sticky: Actúa como relative hasta llegar a una posición específica, luego se fija.

Practica cada uno de estos valores para ver cómo se comportan y experimentar con combinaciones que te ayuden a comprender cómo afectan el flujo del documento y la relación entre los elementos.

CSS: Introducción a la Propiedad position

1. Introducción a la Propiedad position

2. position: static

3. position: relative

4. position: absolute

5. position: fixed

6. position: sticky

Resumen

Descarga los assets de Gato y croqueta:

Acá tienes el repositorio :

Esta es la herramienta Fancy-border-radius

4. `position: absolute`