¿Cuáles son los valores de posición de CSS?

Question

Accepted Answer

`position` controla cómo se posiciona un elemento y si se aplican las propiedades de desplazamiento (`top`/`right`/`bottom`/`left`).

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: el emparejamiento clave

`absolute` posiciona un elemento relativo a su **antepasado más cercano que esté posicionado** (cualquier cosa que no sea `static`). Así que estableces `position: relative` en un elemento padre para convertirlo en el punto de referencia:

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

Este patrón relative-parent / absolute-child está por todas partes: insignias, menús desplegables, tooltips, botones de cierre.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — bloqueado en la viewport (siempre visible), p. ej. una barra de navegación persistente.
- **sticky** — actúa como relative hasta que alcanza el umbral (`top: 0`), luego se mantiene ahí mientras su contenedor esté en vista — excelente para encabezados de sección.

## Un error común

Los elementos `absolute`/`fixed` se **extrae del flujo normal**, por lo que no reservan espacio — los hermanos actúan como si no estuvieran ahí, lo que puede causar superposición. Planifica para eso (p. ej. agrega padding para compensar una barra de navegación fija).

## Por qué es importante

`position` es esencial para overlays, encabezados sticky, modales, menús desplegables e insignias.

La relación relative-parent/absolute-child y la distinción fixed-vs-sticky son el núcleo práctico que utilizas constantemente.