fixed y sticky: headers que persiguen, secciones que se pegan

Los otros dos valores de position trabajan contra el VIEWPORT: fixed se clava en la pantalla ignorando el scroll, y sticky — el favorito del CSS moderno — fluye normal hasta tocar un borde y ahí se pega. Headers flotantes, sidebars que acompañan, encabezados de tabla que no se van: todo sale de aquí.

fixed: clavado en la pantalla

fixed es un absolute cuyo marco de referencia es la VENTANA: scrollees lo que scrollees, ahí sigue. Sus usos legítimos: headers de navegación, botones flotantes (el chat de soporte), banners de cookies. Su impuesto: el hueco fantasma que hay que compensar a mano.

sticky: el híbrido inteligente

sticky fluye con la página como cualquier elemento (SÍ reserva su espacio — adiós compensación) hasta que el scroll lo lleva a top: 0; ahí se pega... mientras su PADRE siga visible. Cuando el padre sale de pantalla, el sticky se va con él.

<div class="scroll">
<section><h4 class="pegajoso">Sección A</h4><p>Scrollea este panel. El encabezado A se pega arriba hasta que su sección termina...</p><p>Más contenido de A.</p><p>Y más.</p></section>
<section><h4 class="pegajoso">Sección B</h4><p>...y entonces B lo EMPUJA y toma su lugar. Ese relevo es sticky trabajando dentro de los límites de cada padre.</p><p>Más contenido de B.</p><p>Y más.</p><p>Final.</p></section>
</div>

body { font-family: system-ui; padding: 16px; }
.scroll { height: 260px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.pegajoso { position: sticky; top: 0; background: #6d28d9; color: white; margin: 0; padding: 10px 16px; font-size: 14px; }
p { padding: 12px 16px; margin: 0; font-size: 14px; color: #475569; line-height: 1.6; }

Ese efecto "relevo" de los encabezados (el de contactos de tu teléfono: la letra A pegada arriba hasta que llega la B y la releva) es la firma de sticky — imposible de lograr con fixed sin JavaScript.

Mini-reto

Vuelve sticky el header de tu periódico (position: sticky; top: 0 — y un fondo sólido, o el contenido se verá a través). Luego haz sticky el h2 de "Lo más leído" dentro de su aside y observa el relevo al scrollear.

Qué sigue

Ya flotas, anclas y pegas elementos. Pero cuando varios se superponen, ¿quién queda encima? La próxima lección resuelve el misterio del z-index 9999 que no funciona: los stacking contexts.