Relative y Absolute: el patrón de posicionamiento

El estado de partida: `position: static`

Todo elemento HTML empieza con position: static — el valor por defecto. Con static, el elemento sigue el flujo normal: bloques apilados verticalmente, contenido inline fluyendo horizontalmente.

Lo fundamental de static: las propiedades top, right, bottom, left y z-index no tienen ningún efecto. El elemento las ignora por completo. Un “elemento posicionado” es cualquiera cuyo position NO es static — y eso importa porque solo los elementos posicionados actúan como referencia para los hijos absolute y participan en el sistema de z-index.

`position: relative`

position: relative hace dos cosas que parecen simples pero son fundamentales:

1. Desplaza el elemento respecto a su posición normal en el flujo.

.caja {
  position: relative;
  top: 20px;   /* se corre 20px hacia abajo desde su lugar en el flujo */
  left: 10px;  /* se corre 10px hacia la derecha */
}

2. El hueco original permanece en el flujo.

El elemento se mueve visualmente, pero sus vecinos no se reorganizan — el espacio queda reservado. Es el punto más contraintuitivo de relative.

3. Crea un contexto de posicionamiento para hijos absolute — y este es el uso más importante.

Todo hijo con position: absolute busca su ancestro posicionado más cercano. Si el padre tiene position: relative, el hijo se ancla a él. Este es el patrón central de CAT-24:

.card {
  position: relative; /* convierte a .card en referencia para .badge */
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  /* queda en la esquina de .card, no del viewport */
}

`position: absolute`

position: absolute saca el elemento del flujo normal por completo. Dos consecuencias directas:

El elemento no ocupa espacio en el flujo — sus vecinos actúan como si no existiera.
El elemento se posiciona respecto a su ancestro posicionado más cercano (con position ≠ static).

Si no hay ancestro posicionado, el elemento se ancla al bloque inicial (en la práctica, el <body> o el viewport). Este es el error más común: olvidar el position: relative en el padre y que el absolute “se escape” al rincón de la página.

Casos de uso concretos de absolute: badge sobre una card, tooltip encima del contenido, overlay sobre una imagen, contador de notificaciones.

position: absolute NO es herramienta de layout general. Usarlo para hacer columnas o estructurar la página produce layouts frágiles que se rompen con contenido dinámico. Para eso existen Flexbox (CAT-25) y Grid (CAT-26).

Las propiedades de offset: `top`, `right`, `bottom`, `left`

top, right, bottom y left controlan el desplazamiento de un elemento posicionado. En un elemento static, no tienen ningún efecto (aunque getComputedStyle devuelva el valor — es una particularidad del motor: el computed existe pero el efecto es nulo).

Cómo se interpretan según el position:

relative: offset desde la posición normal en el flujo.
absolute: distancia desde los bordes del ancestro posicionado más cercano.
fixed: distancia desde los bordes del viewport.
sticky: el umbral de scroll en el que el elemento comienza a pegarse.

Para los ejercicios de esta plataforma: usá solo px fijos en los offsets. Los valores en % resuelven a px que dependen del tamaño del contenedor (variable según el iframe) y no son validables de forma confiable.

Límite del validador: el motor comprueba las propiedades CSS declaradas (position, top, right). Que la insignia quede visualmente en la esquina de la card es un efecto de layout — lo confirmás mirando el preview.

Tu turno: en el sandbox, aplicá position: relative a .card y position: absolute; top: 8px; right: 8px a .badge. Comprobar con el botón “Comprobar”.