La propiedad position

¿Qué hace position?

Aquí es donde tomas el control. position saca (o no) un elemento del flujo normal y habilita los desplazamientos top, right, bottom y left para moverlo a tu antojo. Hay cinco valores y cada uno juega con reglas distintas.

static (por defecto)

position: static es el comportamiento normal: el elemento sigue el flujo y los desplazamientos no tienen efecto.

relative

position: relative mantiene al elemento en su sitio del flujo (sigue ocupando su hueco original), pero ahora top/left/etc. lo mueven respecto a esa posición de partida. Su otro gran uso, y quizá el más importante: convertirlo en ancestro de referencia para los hijos absolute. Recuérdalo, porque vuelve enseguida.

.movido {
  position: relative;
  top: 10px;   /* baja 10px desde donde estaba */
  left: 20px;  /* se desplaza 20px a la derecha */
}

absolute

position: absolute saca al elemento del flujo (deja de reservar hueco) y lo coloca respecto al ancestro posicionado más cercano: el primero, subiendo en el árbol, que tenga un position distinto de static. Si no hay ninguno, se posiciona respecto al documento.

⚠️ TRAMPA CLÁSICA: ¿respecto a quién se coloca un absolute? No respecto a su padre directo, sino respecto al ancestro posicionado. Si tu insignia acaba en la esquina de la página en vez de la de su tarjeta, casi seguro te faltó un position: relative en esa tarjeta.

.contenedor { position: relative; }   /* ancestro de referencia */
.badge {
  position: absolute;
  top: 8px;
  right: 8px;   /* esquina superior derecha del contenedor */
}

Este patrón relative + absolute es el pan de cada día para colocar insignias, iconos o botones de cierre justo donde quieres dentro de una caja.

fixed

position: fixed también sale del flujo, pero se ancla a la ventana del navegador (viewport): no se mueve al hacer scroll. Es el truco detrás de esa barra que se queda fija arriba o ese botón flotante que te sigue por toda la página.

.boton-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

sticky

position: sticky es el camaleón: el elemento fluye con normalidad hasta que alcanza el umbral que le marcas (p. ej. top: 0) durante el scroll; en ese punto se "pega" y permanece fijo mientras su contenedor siga en pantalla. Perfecto para esos encabezados de sección que se quedan arriba mientras lees la sección y luego se van con ella.

.encabezado {
  position: sticky;
  top: 0;   /* se pega al borde superior al hacer scroll */
}

Resumen: relative mueve y referencia; absolute posiciona dentro del ancestro; fixed se ancla al viewport; sticky se pega al desplazarse.

Ejemplos

Una insignia en la esquina con relative + absolute

<style>
.caja {
  position: relative;
  width: 160px;
  height: 90px;
  background: #e2e8f0;
}
.badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ef4444;
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
}
</style>
<div class="caja">
  <span class="badge">Nuevo</span>
  Producto
</div>