CSS: Posicionamento CSS

Última atualização: 2026-10-13

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

Valor	Comportamento	Ponto de Referência	Uso Comum
`static`	Fluxo normal (padrão)	—	Comportamento padrão
`relative`	Offset da posição normal	Posição original do próprio	Ajuste fino, contexto de posicionamento
`absolute`	Removido do fluxo	Ancestral posicionado mais próximo	Emblemas, sobreposições
`fixed`	Fixo no viewport	Viewport	Cabeçalhos fixos, voltar ao topo
`sticky`	Híbrido	Contêiner de rolagem + viewport	Cabeçalhos fixos

Propriedades nesta seção: top bottom left right z-index opacity

1. position: relative

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

▶ Exemplo

▶ Experimente

Usos comuns:

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

2. position: absolute

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

▶ Exemplo

▶ Experimente

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

3. position: fixed

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

▶ Exemplo

▶ Experimente

Usos comuns:

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

4. position: sticky

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

▶ Exemplo

▶ Experimente

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

5. z-index (Ordem de Empilhamento)

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

▶ Exemplo

▶ Experimente

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

(1) 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.

Propriedades nesta seção: top bottom left right z-index opacity

❓ Perguntas Frequentes

P Para que serve position: relative?

R Mais comumente usado como referência de posicionamento para filhos absolutos. Adicione position: relative a um pai (sem offset), e filhos com position: absolute se posicionarão relativos àquele pai. Sem relative no pai, absolute se posiciona relativo à página inteira.

P Posicionamento fixed não funciona bem no mobile?

R Fixed se comporta inconsistentemente no Safari mobile, especialmente com popups de teclado ou rolagem de página. Use position: sticky como alternativa para alguns cenários, ou use JavaScript para detectar mobile e tratar especialmente.

P z-index está definido alto mas ainda bloqueado?

R z-index só funciona dentro do mesmo contexto de empilhamento. Se um pai tem z-index, o z-index dos filhos só compara dentro daquele contexto do pai — não cruzará limites do pai. Verifique se um pai tem z-index menor, ou se o pai tem propriedades como opacity que criam novos contextos de empilhamento.

📖 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

Crie um "card de produto" com um emblema "HOT" no canto superior direito usando position: absolute.
Crie uma barra de navegação inferior fixa ou aviso de direitos autorais usando position: fixed.
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.
Implemente centralização absoluta de um elemento filho (usando absolute + top/left + transform).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós