Position en CSS: relative, absolute, fixed y sticky

Position en CSS controla cómo se posiciona una caja. Sus valores más habituales son static, relative, absolute, fixed y sticky. Elegir uno cambia su relación con el flujo del documento y con su bloque de referencia.

No necesitas posicionar absolutamente todos los elementos para diseñar una página. Para distribuir secciones completas, normalmente conviene empezar con el flujo normal, Grid o Flexbox.

Static y relative: mantener el espacio original

static es el valor inicial; los desplazamientos como top no actúan. Con relative, puedes desplazar visualmente la caja sin quitar el espacio que ocupaba.

.etiqueta {
  position: relative;
  top: -4px;
}

El contenido que viene después no sube a ocupar su lugar. Además, un ancestro posicionado de esta forma puede servir como referencia para descendientes absolutos.

Absolute: colocar una etiqueta dentro de una tarjeta

<article class="producto">
  <span class="insignia">Nuevo</span>
  <h2>Curso de CSS</h2>
  <p>Aprende a construir interfaces responsive.</p>
</article>
<style>
  .producto {
    position: relative;
    padding: 64px 24px 24px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
  }
  .insignia {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #1d4ed8;
    color: #fff;
  }
</style>

La insignia sale del flujo normal y no reserva espacio. Por eso el ejemplo deja padding suficiente arriba. Su referencia es la tarjeta posicionada, no necesariamente toda la ventana.

Fixed: fijar respecto a la ventana

.ayuda {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Un elemento fijo normalmente se coloca respecto al viewport y permanece visible al desplazar. Algunos ancestros, por ejemplo con determinadas transformaciones, pueden establecer otro bloque de referencia. Si el resultado cambia al mover el elemento a otro contenedor, revisa sus ancestros.

Los elementos fijos también salen del flujo. Comprueba que no tapen formularios, texto o controles en móvil y con zoom.

Sticky: adherirse durante el desplazamiento

.indice {
  position: sticky;
  top: 24px;
  align-self: start;
}

Sticky mantiene la caja en el flujo y puede adherirla al alcanzar el umbral indicado, dentro de sus límites. Necesita un desplazamiento aplicable y espacio para moverse.

Por qué sticky no funciona

• No has definido un umbral como top en el eje que esperas.
• Un ancestro con overflow crea un contexto de desplazamiento diferente.
• El contenedor es demasiado corto para permitir recorrido.
• La caja se estira hasta ocupar todo el espacio disponible.

Comprueba el panel de estilos calculados y el árbol de contenedores antes de añadir valores cada vez mayores.

Errores comunes al posicionar

Un diseño entero con coordenadas puede romperse cuando el texto crece. Utiliza position para necesidades concretas, como una insignia o un índice, y conserva el contenido principal en una distribución flexible. Si el problema es qué elemento queda delante, también necesitas entender los contextos de apilamiento.

Preguntas frecuentes

¿Absolute siempre depende del padre?

No necesariamente. Depende del ancestro que establezca su bloque de referencia; el padre inmediato puede no hacerlo.

¿Relative cambia el orden de lectura?

No. El desplazamiento visual no reorganiza el DOM ni convierte ese nuevo lugar en el orden del teclado.

Para problemas de alineación sencillos, consulta centrar elementos con CSS. Continúa en la ruta de CSS.

Referencia técnica: documentación de MDN.