position

position es la propiedad CSS que controla cómo un elemento se ubica en la página: si sigue el flujo normal del documento o se saca de él, y cuál es su punto de referencia para los desplazamientos. Es la puerta de entrada al sistema de posicionamiento de CSS, el mecanismo para lograr layouts que el flujo normal no puede producir por sí solo: elementos superpuestos, badges en esquinas, barras fijas al viewport, encabezados que se pegan al scrollear.

Sin position declarado (o con position: static, el valor por defecto), un elemento sigue el flujo normal: los bloques se apilan verticalmente y los elementos inline fluyen horizontalmente junto al texto. Cambiar position a cualquier otro valor convierte al elemento en un elemento posicionado, lo que habilita dos cosas fundamentales: que las propiedades top, right, bottom y left tengan efecto, y que el elemento pueda actuar como referencia de anclaje para hijos con position: absolute.

Entender position es entender el eje Z del layout: quién está en el flujo, quién salió, y respecto de qué punto de referencia se ubica cada elemento. Los cinco valores de la propiedad — static, relative, absolute, fixed y sticky — cubren un espectro de comportamientos que va desde “en el flujo sin cambios” hasta “anclado al viewport independientemente del scroll”.

Cómo funciona

position establece el modelo de posicionamiento del elemento. El cambio más importante es si el elemento participa o no en el flujo normal del documento, y cuál es su contenedor de referencia (el bloque respecto del cual se interpretan top, right, bottom y left).

Un elemento posicionado es cualquiera con position diferente de static. Solo los elementos posicionados responden a top, right, bottom, left y z-index. Esta distinción es central: poner top: 10px en un elemento static no tiene efecto visible aunque el valor aparezca en el computed del navegador.

Sintaxis

selector {
  position: static;    /* valor por defecto */
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

Valores

static (valor por defecto)

El elemento sigue el flujo normal sin modificación. Las propiedades top, right, bottom, left y z-index son ignoradas. No crea contexto de posicionamiento para hijos absolute. Es el comportamiento de todos los elementos cuando no se declara position.

.caja {
  position: static; /* equivale a no declarar position */
}

Cuándo usarlo: casi nunca de forma explícita. Se declara static para cancelar un position heredado de una clase base o de la hoja de estilos del sitio.

relative

position: relative hace dos cosas que parecen simples pero son fundamentales para el sistema de posicionamiento:

1. Permite desplazar el elemento respecto a su posición natural en el flujo, usando top, right, bottom y left. El elemento se mueve visualmente, pero su hueco original permanece en el flujo: los vecinos no se reorganizan como si el elemento no estuviera.

2. Convierte al elemento en referencia de posicionamiento para sus hijos absolute. Todo hijo con position: absolute busca hacia arriba en el DOM hasta encontrar su ancestro posicionado más cercano — cualquiera con position ≠ static. Si el padre tiene position: relative, el hijo se ancla a ese padre. Este es el uso más frecuente de relative en la práctica.

.card {
  position: relative; /* convierte a .card en referencia para .badge */
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px; /* se ubica en la esquina de .card, no de la página */
}

Cuándo usarlo: principalmente como contenedor de referencia para hijos absolute (el patrón card + badge). Ocasionalmente para ajustes de alineación visual finos sin alterar el flujo.

absolute

position: absolute saca el elemento del flujo normal por completo. Sus vecinos actúan como si no existiera: no se le reserva hueco, no empuja a nadie.

El elemento se posiciona respecto a su ancestro posicionado más cercano — cualquiera con position diferente de static. Si no existe ningún ancestro posicionado en el árbol DOM, el elemento se ancla al bloque inicial (el viewport en la mayoría de los casos prácticos, o el <body>).

.contenedor {
  position: relative; /* establece la referencia */
  width: 300px;
  height: 200px;
}
.tooltip {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%); /* centra horizontalmente */
}

Cuándo usarlo: badges, tooltips, overlays sobre imágenes, contadores de notificaciones, menús desplegables anclados a su disparador. No para layout estructural de la página — para eso son Flexbox y Grid.

fixed

position: fixed también saca el elemento del flujo normal, pero su referencia es el viewport (la ventana del navegador), no un ancestro del DOM. El elemento permanece en el mismo lugar de la pantalla aunque el usuario haga scroll.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* la barra queda siempre visible en la parte superior */
}

Cuándo usarlo: barras de navegación siempre visibles, botones “volver arriba”, banners de cookies, chats flotantes. Recordá compensar el espacio que ocupa con margin-top en el contenedor principal.

sticky

position: sticky es el valor más complejo: se comporta como relative mientras el elemento está dentro de los límites de su contenedor en el viewport, pero en el momento en que llega a un umbral de scroll declarado (por ejemplo, top: 0), se “pega” al viewport como si fuera fixed — hasta que su propio contenedor sale de la pantalla.

.encabezado-seccion {
  position: sticky;
  top: 0; /* se pega al borde superior al scrollear */
  background-color: white;
}

Los tres requisitos para que sticky funcione:

1. Un offset declarado (top, bottom, left o right con valor distinto de auto). Sin este umbral, sticky actúa como relative y nunca se pega.
2. Un ancestro con mecanismo de scroll (overflow: scroll, auto o hidden). Sin scroll real, el efecto no puede activarse.
3. El padre debe tener altura suficiente. El sticky solo se pega dentro de los límites de su contenedor padre. Cuando el padre sale del viewport, el sticky lo sigue.

Cuándo usarlo: encabezados de sección que se pegan mientras el usuario scrollea por esa sección, columnas laterales en artículos largos, filas de encabezado en tablas largas.

Cuándo usar qué

Bloque “Resultado”

El patrón más común de positioning: un badge absolute anclado a una card con relative.

.card {
  position: relative;
  width: 200px;
  padding: 16px;
  background: #fef3c7;
  border: 1px solid #d97706;
  border-radius: 8px;
  font-family: sans-serif;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #d97706;
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
}

Para position: fixed y position: sticky, el efecto depende del scroll del viewport y no se aprecia bien en un preview estático — los SVGs de arriba ilustran el comportamiento.

Notas, gotchas e interacción

• relative mantiene el hueco en el flujo. Al desplazar un elemento con position: relative, su espacio original permanece reservado. Los vecinos no se mueven como si hubiera desaparecido. Esto lo diferencia radicalmente de absolute.
• El “escape” del absolute sin padre posicionado. El error más frecuente en positioning: declarar position: absolute en un hijo sin que ningún ancestro tenga position distinto de static. El elemento se ancla al bloque inicial (viewport o body) y “se escapa” al rincón de la página. La solución es siempre agregar position: relative al contenedor deseado.
• fixed y transform en ancestros. Si un ancestro del elemento fixed tiene transform, filter o perspective aplicado, el elemento deja de anclarse al viewport y se ancla a ese ancestro transformado. Es un comportamiento contra-intuitivo documentado en la especificación.
• sticky necesita sus tres requisitos. Olvidar el offset (top: 0), que el ancestro no tenga scroll real, o que el padre no tenga altura suficiente son las causas más frecuentes de que sticky “no funcione”.
• position vs display: none. position: absolute y fixed sacan el elemento del flujo pero lo mantienen visible (si no está oculto por otro medio). display: none lo elimina del flujo y del renderizado completamente.
• Interacción con overflow. Un ancestro con overflow: hidden o overflow: clip puede recortar a un hijo con position: absolute si el hijo sale de sus límites. position: fixed no se ve afectado por el overflow de sus ancestros (pero sí por transform, como se mencionó).

Vigente / legacy

Todos los valores de position están vigentes y tienen soporte universal. No hay forma legacy. Los valores relative, absolute y fixed existen desde CSS2. sticky fue el último en llegar y hoy tiene soporte amplio (Baseline widely). En proyectos muy antiguos podías encontrar polyfills para sticky, pero en cualquier proyecto moderno los cinco valores funcionan sin prefijos.

Aprendelo en el recorrido

Esta propiedad se desarrolla en el módulo Positioning del recorrido. La lección positioning-01-relative-y-absolute cubre static, relative y absolute con el patrón card + badge. Los valores fixed, sticky y el sistema de z-index se desarrollan en positioning-02-fixed-sticky-z-index.