Sticky Position
Posición fija
La posición sticky de CSS comienza como la posición relativa normal. A medida que la página se desplaza, el cuadro puede permanecer en un borde establecido, pero solo dentro de su bloque contenedor.
Otro ejemplo
Una tabla larga se encuentra dentro de un área de desplazamiento con top: 0 en su encabezado. El encabezado se mantiene en la parte superior solo mientras su tabla está a la vista. La ausencia de un borde definido o el uso del contenedor de desplazamiento incorrecto puede impedir que la posición sticky funcione.
Partes principales
- 01contenedor de desplazamiento
- 02inserción no automática
- 03límite del bloque contenedor
Úsalo cuando
Use este término cuando un elemento en el diseño normal deba permanecer visible dentro de su área de desplazamiento más cercana.
No lo uses cuando
No use elementos adhesivos que cubran contenido, se apilen de manera poco clara o ocupen la mayor parte de una pantalla pequeña.
Nombre usado en código
position: sticky; inset-block-start: 0 Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Posición fija (Sticky Position). User context: Una tabla larga se encuentra dentro de un área de desplazamiento con top: 0 en su encabezado. El encabezado se mantiene en la parte superior solo mientras su tabla está a la vista. La ausencia de un borde definido o el uso del contenedor de desplazamiento incorrecto puede impedir que la posición sticky funcione. Design concept to apply: Posición fija (Sticky Position). Why it fits: Use este término cuando un elemento en el diseño normal deba permanecer visible dentro de su área de desplazamiento más cercana. Do not use it when: No use elementos adhesivos que cubran contenido, se apilen de manera poco clara o ocupen la mayor parte de una pantalla pequeña. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Posición fija (Sticky Position) is used now. Definition: La posición sticky de CSS comienza como la posición relativa normal. A medida que la página se desplaza, el cuadro puede permanecer en un borde establecido, pero solo dentro de su bloque contenedor. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.