← Voltar à biblioteca
Layout

Elemento fixo

Fixed positioning

Mantém um elemento em posição fixa em relação ao seu bloco de referência, frequentemente a janela.

Sempre por aqui ↑

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

Quando usar

Disponibilizar controles persistentes durante a navegação.

Cuidados e acessibilidade

Verifique sobreposição de conteúdo, teclado virtual e ancestrais que criam outro bloco de referência.

Partes e comportamento

Elemento posicionado fora do fluxo e offsets em seu bloco de referência.

Não confunda

Ancestrais com certas propriedades podem mudar o bloco de referência; nem sempre será a viewport.

Exemplo de código

.acao-flutuante {
  position: fixed;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
}

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

Peça assim para uma IA

BIBLIOTECA UI / EXPLORAR