Posicionamento CSS

O posicionamento CSS é uma ferramenta de layout poderosa que permite controlar com precisão o posicionamento de elementos na página.

Referência Rápida da Propriedade Position

position: relative

Desloca o elemento de sua posição normal, sem removê-lo do fluxo do documento:

Exemplo

<style>
.box {
  position: relative;
  top: 20px;    /* Move para baixo 20px */
  left: 30px;   /* Move para direita 30px */
  background: #e3f2fd;
  padding: 10px;
}
</style>
<div class="box">Posicionado relativamente (deslocado da posição original)</div>
<p>Este parágrafo permanece no fluxo normal — a caixa ainda ocupa seu espaço original.</p>

Usos comuns:

• Ajuste fino da posição do elemento
• Criação de contexto de posicionamento para filhos absolutos

position: absolute

Remove o elemento do fluxo, posicionado relativo ao ancestral posicionado mais próximo:

Exemplo

<style>
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px solid #333;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e74c3c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>
<div class="parent">
  <div class="badge">HOT</div>
  <p>Conteúdo do card de produto</p>
</div>

Ponto chave: Se não existir ancestral posicionado, absolute posiciona relativo ao viewport.

position: fixed

Fixo no viewport, não rola com a página:

Exemplo

<style>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #2c3e50;
  color: white;
  padding: 10px 20px;
  z-index: 1000;
}
</style>
<div class="fixed-header">Cabeçalho fixo — sempre visível no topo</div>

Usos comuns:

• Barras de navegação
• Botões de voltar ao topo
• Widgets de chat

position: sticky

Híbrido de relative e fixed — rola normalmente depois "gruda" em um limiar:

Exemplo

<style>
.sticky-nav {
  position: sticky;
  top: 0;
  background: #2c3e50;
  color: white;
  padding: 10px;
  z-index: 100;
}
</style>
<div class="sticky-nav">Navegação fixa — rola com conteúdo, depois gruda no topo</div>

Notas de uso:

• Requer valor top, bottom, left ou right para funcionar
• Elemento pai não pode ter overflow: hidden ou overflow: auto
• Altura do pai deve ser maior que a altura do elemento sticky

z-index (Ordem de Empilhamento)

Quando elementos se sobrepõem, z-index controla qual aparece no topo:

Exemplo

<style>
.box1 {
  position: absolute;
  z-index: 10;
  background: #e74c3c;
  width: 100px;
  height: 100px;
}
.box2 {
  position: absolute;
  z-index: 5;
  background: #3498db;
  width: 100px;
  height: 100px;
  left: 30px;
  top: 30px;
}
</style>
<div class="box1">z-index: 10 (no topo)</div>
<div class="box2">z-index: 5 (atrás)</div>

Nota: z-index só funciona em elementos posicionados (não static).

Contexto de Empilhamento

z-index é comparado dentro do mesmo "contexto de empilhamento." Cada elemento posicionado cria um contexto de empilhamento — o z-index dos filhos só compara dentro do contexto do pai.

❓ Perguntas Frequentes

📖 Resumo

• O posicionamento CSS é uma ferramenta de layout poderosa
• relative é para ajuste fino e contexto de posicionamento
• absolute posiciona precisamente filhos dentro de pais
• fixed é para elementos fixos no viewport (navegação, voltar ao topo)
• sticky é para cenários de "grudar na posição"
• Domine posicionamento com empilhamento z-index para atender qualquer necessidade de layout

📝 Exercícios

1. Crie um "card de produto" com um emblema "HOT" no canto superior direito usando position: absolute.
2. Crie uma barra de navegação inferior fixa ou aviso de direitos autorais usando position: fixed.
3. Crie um "título fixo" — títulos de seção que grudam no topo ao rolar até que o próximo título o empurre.
4. Implemente centralização absoluta de um elemento filho (usando absolute + top/left + transform).