Sticky Position
Posição fixa
O posicionamento sticky do CSS começa como um posicionamento relative normal. À medida que a página rola, a caixa pode permanecer em uma borda definida, mas somente dentro de seu bloco contêiner.
Outro exemplo
Uma tabela longa fica dentro de uma área de rolagem com top: 0 no seu cabeçalho. O cabeçalho permanece no topo apenas enquanto sua tabela estiver visível. A falta de uma borda definida ou o uso do contêiner de rolagem errado pode impedir que o posicionamento sticky funcione.
Partes principais
- 01contêiner de rolagem
- 02inserção não automática
- 03limite do bloco contido
Use-o quando
Use este termo quando um item em layout normal deve permanecer visível dentro da sua área de rolagem mais próxima.
Não o use quando
Não use itens fixos que cubram o conteúdo, se empilhem de maneira confusa ou ocupem a maior parte de uma tela pequena.
Nome usado no código
position: sticky; inset-block-start: 0 Antes de lançar
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 Posição fixa (Sticky Position). User context: Uma tabela longa fica dentro de uma área de rolagem com top: 0 no seu cabeçalho. O cabeçalho permanece no topo apenas enquanto sua tabela estiver visível. A falta de uma borda definida ou o uso do contêiner de rolagem errado pode impedir que o posicionamento sticky funcione. Design concept to apply: Posição fixa (Sticky Position). Why it fits: Use este termo quando um item em layout normal deve permanecer visível dentro da sua área de rolagem mais próxima. Do not use it when: Não use itens fixos que cubram o conteúdo, se empilhem de maneira confusa ou ocupem a maior parte de uma tela pequena. 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): Um documento formal ainda pode ser rascunho, release candidate ou versão final. Cheque o status e o suporte no navegador ou plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Conferir este pedido
Review how Posição fixa (Sticky Position) is used now. Definition: O posicionamento sticky do CSS começa como um posicionamento relative normal. À medida que a página rola, a caixa pode permanecer em uma borda definida, mas somente dentro de seu bloco contêiner. 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.