CSS

Position fixed y sticky: elementos persistentes sin romper el scroll

Aprende cuándo un elemento debe anclarse al viewport con `fixed` y cuándo debe seguir el scroll de su contenedor con `sticky`.

¿Cuánto sabes de CSS?

📘 Teoría

Fixed: referencia absoluta al viewport

Úsalo cuando el elemento debe seguir visible pase lo que pase en la página.

Con `fixed`, la caja queda vinculada a la ventana del navegador. Por eso es útil en botones flotantes, banners persistentes, overlays o barras de acción global.

Como sale del flujo, debes prever el espacio que tapa. Un header fijo sin compensación suele esconder el contenido superior.

También conviene controlar bien `z-index`, porque estos elementos suelen vivir en capas altas.

Buen caso: botón de soporte, CTA flotante, barra de consentimiento, modal overlay.
Mal caso: usarlo para todo el layout por comodidad.
Piensa siempre en foco, accesibilidad y espacio tapado.

Sticky: sigue el scroll, pero dentro de su contexto

Sticky funciona mejor cuando el elemento pertenece a una sección y debe permanecer visible mientras esa sección sigue activa.

Un elemento sticky se comporta como `relative` hasta alcanzar el umbral definido. A partir de ahí se fija, pero no al viewport completo: solo dentro del contenedor que gobierna su scroll.

Por eso encaja muy bien en cabeceras de tabla, índices laterales, títulos de secciones o filtros persistentes dentro de un bloque.

Si sticky 'no funciona', normalmente el problema está en el contenedor: overflow incorrecto, altura insuficiente o ausencia del `top` requerido.

Comparación rápida para decidir bien

La pregunta no es 'cuál es mejor', sino 'qué referencia necesito'.

Usa fixed si…

El elemento debe permanecer visible en toda la página sin depender del bloque actual.

Usa sticky si…

El elemento forma parte del contenido y solo debe quedarse visible mientras su contenedor siga activo.

Evita ambos si…

La persistencia visual no aporta valor y solo añade ruido o tapa contenido.

Errores frecuentes

Los problemas típicos casi siempre tienen explicación concreta.

Usar `fixed` sin reservar espacio para el header o la barra.
Aplicar `sticky` sin definir `top`, `bottom`, `left` o `right`.
Esperar que sticky funcione dentro de un contenedor con overflow mal planteado.
Subir el `z-index` a ciegas en vez de revisar la jerarquía de capas.

1 Fixed: referencia absoluta al viewport 2 Sticky: sigue el scroll, pero dentro de su contexto 3 Comparación rápida para decidir bien 4 Errores frecuentes

🧭 Visuales clave

Mapa rápido de position en móvil

Sirve como recordatorio visual para no confundir un elemento pegado al viewport con uno pegado al scroll de su contenedor.

Resumen vertical de static, relative, absolute, fixed y sticky con foco en cuándo usar fixed y sticky.

🧪 Aprende probando

Ejemplo Demo interactiva: cómo se comporta fixed Mueve un elemento fijado al viewport y observa cómo permanece visible mientras el contenido hace scroll.

⌄

Ejemplo Demo interactiva: sticky y su umbral de anclaje Visualiza el momento exacto en que el elemento pasa de seguir el flujo a quedarse pegado.

⌄