Posicionamiento fijo y sticky
Fije elementos a la ventana gráfica o cree encabezados y barras laterales que permanezcan adheridos al desplazarse.
Posicionamiento fijo y sticky es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
position: fixed
Un elemento fijo se posiciona con respecto a la ventana gráfica del navegador y permanece en su lugar incluso cuando se desplaza la página. También queda fuera del flujo del documento.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Casos de uso del posicionamiento fijo
Usos habituales de position: fixed:
- Barras de navegación que permanecen en la parte superior
- Botones de acción flotantes (FAB)
- Widgets de chat en la esquina inferior derecha
- Banners de consentimiento de cookies
- Superposiciones modales
Compensación para encabezados fijos
Los encabezados fijos se superponen al contenido que tienen debajo. Añada un relleno o margen superior igual a la altura del encabezado para desplazar el contenido hacia abajo:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Elementos principales con transform y fixed
Una particularidad importante: si se aplica transform, perspective o filter de CSS a un elemento principal, el posicionamiento fijo pasa a ser relativo a ese elemento principal, no a la ventana gráfica. Este es un error habitual.
position: sticky
position: sticky es un híbrido: el elemento se desplaza normalmente hasta alcanzar un umbral definido (por ejemplo, top: 0); entonces se fija dentro de su contenedor principal.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
sticky requiere un elemento principal desplazable
El elemento sticky se fija dentro de su bloque contenedor. Si el elemento principal no tiene suficiente altura para desplazarse, sticky no tiene ningún efecto. El elemento principal no debe tener overflow establecido en hidden.
Top, right, bottom y left para sticky
Debe definir al menos un desplazamiento para activar sticky. Estos son algunos patrones habituales:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Encabezados de tabla sticky
Sticky es perfecto para los encabezados de tablas dentro de contenedores de tablas desplazables: el encabezado permanece visible mientras el usuario se desplaza por las filas.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Patrón de barra lateral sticky
Una barra lateral sticky clásica que permanece visible mientras se desplaza el contenido principal:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Resumen de fixed frente a sticky
Diferencias principales:
- Fixed: siempre es relativo a la ventana gráfica y siempre está fuera del flujo
- Sticky: se desplaza con el contenido hasta alcanzar el umbral, permanece en el flujo y se detiene en el límite del elemento principal
Rendimiento: fixed y capas
Los elementos fixed crean un nuevo contexto de apilamiento y pueden provocar un nuevo diseño durante el desplazamiento si se superponen a áreas que deben volver a pintarse. Mantenga simples los elementos fixed y evite propiedades costosas, como box-shadow, en ellos.
Comprobación rápida
¿Qué restricción tiene position: sticky que no tiene position: fixed?
Repaso
position: fixed ancla los elementos a la ventana gráfica para crear navegaciones sticky y superposiciones. position: sticky se desplaza normalmente hasta alcanzar un umbral y después se fija, por lo que es perfecto para encabezados de tablas y barras laterales. Ambos requieren al menos una propiedad de desplazamiento para activar la fijación.
Preguntas frecuentes
¿La lección «Posicionamiento fijo y sticky» es gratis?
Sí — el texto completo de «Posicionamiento fijo y sticky» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Posicionamiento fijo y sticky»?
Fije elementos a la ventana gráfica o cree encabezados y barras laterales que permanezcan adheridos al desplazarse. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Posicionamiento fijo y sticky»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Posicionamiento estático y relativo
- Posicionamiento absoluto y bloque contenedor
- Posicionamiento fijo y sticky
- Z-index y contexto de apilamiento