← Voltar à biblioteca
Layout

Elemento aderente

Sticky positioning

Permanece preso a um limite durante parte da rolagem do seu contêiner.

Este cabeçalho acompanha a seção.

Exemplo didático · Representação visual do padrão

Quando usar

Manter títulos, filtros ou contexto visíveis dentro de uma seção.

Cuidados e acessibilidade

Defina o limite e confira se ancestrais com overflow alteram o comportamento.

Partes e comportamento

Elemento, ancestral de rolagem, limite de aderência e posição relativa.

Não confunda

Sticky depende da posição no contêiner. Fixed sai do fluxo e usa um bloco de referência.

Exemplo de código

.cabecalho-da-secao {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

BIBLIOTECA UI / EXPLORAR