top, right, bottom, left

top, right, bottom y left son las cuatro propiedades de desplazamiento de CSS — también llamadas insets o offsets de posicionamiento. Definen la distancia entre el borde del elemento posicionado y el borde correspondiente de su contenedor de referencia: el ancestro posicionado más cercano (para absolute), el viewport (para fixed), o la posición original en el flujo (para relative). Juntas permiten ubicar con precisión cualquier elemento que haya salido del flujo normal.

La condición fundamental es que estas propiedades solo tienen efecto en elementos posicionados, es decir, en aquellos cuyo position es relative, absolute, fixed o sticky. En un elemento con position: static (el valor por defecto), declarar top: 10px no produce ningún efecto visible, aunque el valor aparezca en el getComputedStyle del navegador.

Las cuatro propiedades comparten el mismo modelo conceptual pero se interpretan de manera diferente según el valor de position. En relative, los offsets son relativos a la posición natural del elemento en el flujo. En absolute y fixed, son distancias desde los bordes del contenedor de referencia. En sticky, actúan como el umbral de scroll en el que el elemento comienza a pegarse.

Cómo funciona

El significado de los insets depende del valor de position. Esto los hace más versátiles que una simple coordenada, pero también es la fuente del malentendido más común.

En position: relative: el offset es relativo a la posición original del elemento en el flujo. top: 20px desplaza el elemento 20px hacia abajo desde donde estaría sin position. El hueco original permanece en el flujo — los vecinos no se reorganizan.

En position: absolute: el offset es la distancia desde el borde del ancestro posicionado más cercano. top: 0; right: 0 ubica el elemento en la esquina superior derecha de ese ancestro, con sus bordes tocando los del contenedor.

En position: fixed: igual que absolute, pero el contenedor de referencia es siempre el viewport. top: 0; left: 0 pega el elemento a la esquina superior izquierda de la pantalla, independientemente del scroll.

En position: sticky: el valor del inset define el umbral de scroll. top: 0 significa “cuando este elemento llegue al borde superior del viewport al scrollear, quédate ahí pegado”.

Sintaxis

/* Valores individuales */
top: 20px;
right: 0;
bottom: 10%;
left: auto;

/* Combinaciones comunes */
top: 0; right: 0;           /* esquina superior derecha */
top: 50%; left: 50%;        /* antes de centrado con transform */
top: 0; right: 0; bottom: 0; left: 0;  /* cubre todo el contenedor */

Valores

Longitudes (px, em, rem, %)

El valor más común. Especifica una distancia fija o proporcional desde el borde del contenedor de referencia.

• px — distancia fija e independiente del tamaño de fuente. Predecible y directo.
• em / rem — útiles cuando el desplazamiento debe escalar con la tipografía.
• % — porcentaje del alto o ancho del contenedor, según la propiedad. top/bottom en porcentaje es relativo al alto del contenedor de referencia; left/right es relativo al ancho. En position: relative, el porcentaje se calcula respecto al propio elemento.

auto (valor por defecto)

Sin desplazamiento declarado. Con position: relative, auto equivale a “no mover en esta dirección”. Con position: absolute, el navegador calcula la posición según el flujo normal (el elemento aparece donde aparecería si fuera estático).

Valores negativos

Los valores negativos son válidos y útiles. En absolute, un top: -10px desplaza el elemento 10px fuera del borde superior del contenedor. En relative, lo desplaza en dirección opuesta a la esperada.

.badge-externo {
  position: absolute;
  top: -8px;    /* sale 8px del borde superior del padre */
  right: -8px;  /* sale 8px del borde derecho */
}

Combinaciones y estirado

Cuando se declaran dos insets opuestos (top + bottom o left + right) en un elemento con position: absolute o fixed y sin height/width explícitos, el elemento se estira para cubrir el espacio entre ambos bordes.

/* Overlay que cubre todo el contenedor */
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

Esta técnica es equivalente a la propiedad abreviada inset: 0 (ver §Vigente / legacy).

Cuándo usar qué combinación

Notas, gotchas e interacción

• Sin efecto en static. Declarar top: 20px en un elemento position: static no produce ningún efecto visual. Este es el error más frecuente para principiantes: agregar un offset sin haber cambiado position.
• right y bottom no son “coordenadas desde el origen”. right: 20px significa “20px desde el borde derecho del contenedor”, no desde la esquina superior izquierda. Pensar en ellos como márgenes internos del contenedor ayuda a entenderlos correctamente.
• Porcentajes en top/bottom referencian el alto del contenedor, no el del elemento. En un contenedor de 400px de alto, top: 50% posiciona el borde superior del elemento a 200px. Para centrar verticalmente hace falta combinar con transform: translateY(-50%).
• Los insets no funcionan en reemplazos de layout general. Usar absolute con insets para crear una cuadrícula de elementos es frágil y se rompe con contenido dinámico. Para layout estructural usar Flexbox o Grid.
• Interacción con overflow. Si el ancestro posicionado tiene overflow: hidden, un hijo con absolute que salga de sus límites (mediante offsets negativos) quedará recortado.

Vigente / legacy

top, right, bottom y left son propiedades CSS desde la versión 2 y no tienen forma legacy. No requieren prefijos de vendor.

La propiedad inset (y sus variantes inset-block, inset-inline, inset-block-start, etc.) son las propiedades lógicas modernas que unifica los cuatro insets en una sola declaración:

/* moderno — shorthand que equivale a top/right/bottom/left */
inset: 0;           /* todos los lados a 0 */
inset: 8px 16px;    /* bloque: 8px; inline: 16px */

/* equivale a: */
top: 0; right: 0; bottom: 0; left: 0;

inset tiene soporte amplio (Baseline widely). Es la forma preferida en proyectos modernos cuando se necesita especificar los cuatro lados, pero las propiedades individuales siguen siendo completamente vigentes y son más legibles cuando solo se declaran uno o dos lados.

Aprendelo en el recorrido

Estas propiedades se desarrollan en el módulo Positioning del recorrido. La lección positioning-01-relative-y-absolute muestra en detalle cómo top y right ubican un badge en la esquina de una card.