Como posicionar elementos com CSS usando static, relative, absolute, fixed e sticky
A propriedade position controla como um elemento é posicionado na página. Com ela, você pode tirar elementos do fluxo normal e posicioná-los em lugares específicos da tela.
Junto com position, as propriedades top, right, bottom e left definem as coordenadas do elemento.
É o valor padrão. O elemento segue o fluxo normal da página e as propriedades de coordenadas não têm efeito.
Carregando...O elemento continua no fluxo normal, mas você pode deslocá-lo a partir da sua posição original. O espaço original é preservado.
Carregando...O elemento sai do fluxo normal e é posicionado em relação ao ancestral mais próximo que tenha position diferente de static. Se não houver nenhum, é posicionado em relação ao documento inteiro.
Carregando...absolute é muito usado para elementos que precisam se sobrepor a outros, como badges, tooltips e menus dropdown.
O elemento sai do fluxo e fica fixo em relação à janela do navegador. Ele não se move quando a página é rolada.
Carregando...Muito usado para barras de navegação que ficam visíveis durante o scroll.
O elemento se comporta como relative até atingir um ponto de rolagem definido, quando passa a se comportar como fixed.
Carregando...É a forma mais moderna de criar cabeçalhos que "grudam" no topo ao rolar.
| Valor | Fica no fluxo? | Referência de posição |
|---|---|---|
| static | Sim | nenhuma |
| relative | Sim | posição original |
| absolute | Não | ancestral posicionado |
| fixed | Não | janela do navegador |
| sticky | Sim/Não | fluxo + ponto de rolagem |