Aula 12 — Position: posicionando elementos no CSS

Até agora, os elementos seguiram o fluxo normal do documento. Mas às vezes precisamos posicionar algo de forma específica.

É aí que entra a propriedade position.

O que é position?

A propriedade position define como um elemento é posicionado em relação à página ou a outros elementos.

Os valores mais importantes são:

• static
• relative
• absolute
• fixed
• sticky

Position static (padrão)

Todo elemento começa com position: static.

Nesse modo:

• O elemento segue o fluxo normal
• As propriedades top, right, bottom e left não funcionam

 .elemento { position: static; } 

Position relative

Com position: relative, o elemento continua no fluxo, mas pode ser deslocado a partir da sua posição original.

 .caixa { position: relative; top: 10px; left: 20px; } 

O espaço original do elemento é mantido.

Position absolute

O position: absolute remove o elemento do fluxo normal.

Ele se posiciona em relação ao primeiro ancestral com position diferente de static.

 .container { position: relative; }

.item {
position: absolute;
top: 0;
right: 0;
}

Position fixed

Com position: fixed, o elemento:

• Fica fixo na tela
• Não se move ao rolar a página

 .menu { position: fixed; top: 0; width: 100%; } 

É comum usar em menus e botões flutuantes.

Position sticky

O position: sticky é uma mistura de relative com fixed.

O elemento:

• Se comporta como relativo
• Fica fixo ao atingir um ponto da rolagem

 .cabecalho { position: sticky; top: 0; } 

Propriedades de posicionamento

As propriedades usadas com position são:

• top
• right
• bottom
• left

Elas definem o deslocamento do elemento.

Boas práticas com position

• Evite usar absolute para layout principal
• Prefira Flexbox e Grid para layouts
• Use position para ajustes pontuais

Na próxima aula, vamos entrar em um dos maiores aliados do CSS moderno: Flexbox 💪📐