Posicionamento - Aula de CSS

O que é o posicionamento em CSS?

A propriedade position define como um elemento é posicionado na página e como ele se relaciona com outros elementos ao seu redor.

Os principais valores de position são:

• static — padrão, segue o fluxo normal da página;
• relative — desloca o elemento em relação à sua posição original;
• absolute — posiciona o elemento em relação ao primeiro ancestral posicionado;
• fixed — fica fixo na tela mesmo com rolagem;
• sticky — alterna entre relative e fixed dependendo da rolagem.

Exemplos Visuais

Position: static — padrão, o elemento segue o fluxo natural.

Position: relative — move-se em relação à posição original.

Position: absolute — é posicionado em relação ao ancestral com position definido.

Position: fixed — permanece fixo na tela.

Position: sticky — gruda no topo ao rolar a página.

Posicionamento de Imagens

Podemos usar position: absolute para colocar texto sobre imagens, rótulos, botões ou ícones.

Legenda Posicionada

No exemplo acima, a div.label foi posicionada com:

.label {
  position: absolute;
  bottom: 15px;
  right: 15px;
}