Posições de elementos no CSS

 A propriedade position define como um elemento será posicionado na página.

Valores principais:

position: static; : Posição padrão. Segue o fluxo normal da página.

position: relative;  : Mantém seu espaço original, mas pode ser movido com top, left, right, bottom.

position: absolute; :Sai do fluxo normal e se posiciona em relação ao elemento pai posicionado.

position: fixed; : Fica preso na tela, mesmo ao rolar a página.

position: sticky; :Age normal até certo ponto, depois “gruda” na tela.

Exemplo:

menu{
position: static; -----------> posição definida
top: 0;  ----------------------> move para cima
left: 0;  ----------------------> move para os lados
width: 100px;
height: 100px;
background-color: #000;
}

Valores:

* position: static;

É um valor padrão da propriedade position.

→ O elemento segue o fluxo normal da página.

→ Fica onde naturalmente apareceria no HTML.

→ Não usa top, right, bottom ou left.

→ Não sai do lugar por posicionamento manual.

Exemplo:

<p>Texto 1</p>

<p>Texto 2</p>

→ Cada elemento aparece na ordem normal do código.

Importante:

Mesmo colocando:

top: 20px;

left: 10px;

Em static, isso não funciona.

---

* position: relative;

Mantém o elemento no fluxo normal da página, mas permite mover sua posição.

→ O elemento continua ocupando seu espaço original.

→ Pode ser movido com top, right, bottom e left.

→ Os outros elementos continuam considerando seu lugar inicial.

Exemplo:

div{ 

position: relative; 

top: 20px; 

left: 10px; 

}

→ Move 20px para baixo e 10px para a direita.

Importante:

O espaço antigo do elemento permanece reservado no layout.

Uso comum:

• Ajustes finos de posição.
• Base para elementos com position: absolute; dentro dele.
• Pequenos deslocamentos visuais.

---

* position: absolute;

Remove o elemento do fluxo normal da página e posiciona livremente.

→ O elemento sai do lugar normal no layout.

→ Outros elementos agem como se ele não estivesse ali.

→ Pode ser movido com top, right, bottom e left.

Referência de posição:

Ele se posiciona em relação ao primeiro elemento pai que tenha posição definida (relative, absolute, fixed ou sticky).

Se não houver pai posicionado: Usa a página/janela como referência.

Exemplo:

.caixa{ 

position: relative; 

} 

.item{ 

position: absolute; 

top: 0; 

right: 0; 

}

→  O .item vai para o canto superior direito da .caixa.

Uso comum:

• Ícones sobre imagens
• Botões no canto
• Etiquetas, badges e sobreposições
• Layouts específicos

Importante:

Como sai do fluxo normal, pode sobrepor outros elementos.

---

* position: fixed;

Fixa o elemento na tela do navegador.

→ O elemento sai do fluxo normal da página.

→  Fica preso à janela de visualização.

→ Continua no mesmo lugar mesmo ao rolar a página.

→ Pode usar top, right, bottom e left.

Exemplo:

.botao{ 

position: fixed; 

bottom: 20px; 

right: 20px; 

}

→ O botão fica no canto inferior direito da tela.

Uso comum:

• Botão “voltar ao topo”
• Menu fixo no topo
• Chat flutuante
•  Avisos persistentes

Importante:

Como sai do fluxo normal, pode cobrir outros elementos se não houver cuidado.

---

* position: sticky;

Mistura comportamento de relative com fixed.

position: sticky; 

top: 0;

→ O elemento começa no fluxo normal da página.

→ Ao rolar a tela até o limite definido, ele “gruda”.

→ Depois passa a agir como fixo naquela posição.

→ Quando a área pai termina, ele para junto dela.

Exemplo:

.menu{ 

position: sticky; 

top: 0; 

}

→ O menu rola normalmente no início e depois fica preso no topo.

Uso comum:

• Menus que acompanham a rolagem
•  Cabeçalhos de tabelas
• Barras laterais
• Títulos de seção

Importante:

• Precisa definir top, bottom, left ou right para funcionar.
• Pode não funcionar se o elemento pai tiver certos overflow.
• Muito usado em layouts modernos.