Posicionamento: relative, absolute, fixed e sticky
Retire elementos do fluxo normal com valores de position para sobrepor conteúdo, fixar cabeçalhos e criar barras laterais fixas.
Posicionamento: relative, absolute, fixed e sticky é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Fluxo normal do documento
Por padrão, os elementos seguem o fluxo normal do documento: elementos de bloco se empilham verticalmente, enquanto elementos inline fluem horizontalmente dentro do texto. A propriedade position permite sair desse fluxo para criar sobreposições, cabeçalhos fixos e dicas de ferramenta.
position: static (Padrão)
Todo elemento começa com position: static. Isso significa que ele é posicionado pelo fluxo normal do documento. As propriedades top, right, bottom e left não têm efeito em elementos estáticos.
position: relative
position: relative mantém o elemento no fluxo normal, mas permite deslocá-lo de sua posição original usando top, right, bottom e left. É importante destacar que ele cria um contexto de posicionamento para descendentes posicionados de forma absoluta.
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}posição: absoluta
position: absolute remove o elemento do fluxo normal. Ele é posicionado em relação ao ancestral posicionado mais próximo (qualquer posição diferente de estática). Se não houver um ancestral posicionado, ele será relativo à janela de visualização.
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}A propriedade z-index
Elementos posicionados podem se sobrepor. Use z-index para controlar a ordem de empilhamento. Quanto maior o z-index, mais acima o elemento ficará. Funciona apenas em elementos posicionados (não estáticos). Cria um novo contexto de empilhamento.
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}posição: fixa
position: fixed remove o elemento do fluxo normal e o fixa na janela de visualização. Ele não rola junto com a página. É perfeito para cabeçalhos fixos, botões de ação flutuantes e banners de cookies.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}posição: adesiva
position: sticky é um híbrido: o elemento rola com a página até atingir um limite (definido com top/bottom) e então fica fixo. É útil para cabeçalhos de seção em tabelas longas ou barras laterais que ficam fixas depois do cabeçalho.
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}Centralização com posição: absoluta
Uma técnica clássica: combine position: absolute; top: 50%; left: 50% com transform: translate(-50%, -50%) para centralizar perfeitamente um elemento dentro do elemento pai posicionado.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}O estouro oculto recorta os filhos absolutos
Por padrão, um elemento filho posicionado de forma absoluta pode ultrapassar os limites do elemento pai. Adicionar overflow: hidden ao elemento pai recorta tudo que estiver fora da sua caixa — útil para efeitos em imagens de cartões e para recortar distintivos.
Armadilha: contextos de empilhamento indesejados
Algumas propriedades criam contextos de empilhamento sem intenção: transform, filter, isolation: isolate. Isso pode causar disputas de z-index, nas quais um elemento com z-index: 9999 ainda fica atrás de outro porque está dentro de um contexto de empilhamento inferior.
Quando usar cada posicionamento
relativo: deslocamentos e contexto de posicionamento. absoluto: distintivos, dicas de ferramentas e sobreposições relativas a um elemento pai. fixo: cabeçalhos persistentes, janelas modais e notificações. adesivo: cabeçalhos de seção e navegação lateral que acompanha a rolagem. Evite position para criar layouts — use Flex ou Grid.
Verificação rápida
Um elemento tem position: absolute; top: 0; right: 0;. Onde ele aparecerá se o elemento pai tiver position: relative?
Recapitulação: posicionamento em CSS
estático é o padrão. relativo desloca sem sair do fluxo e cria um contexto de posicionamento. absoluto sai do fluxo e se posiciona em relação ao ancestral posicionado mais próximo. fixo permanece preso à janela de visualização. adesivo rola e depois fica fixo. Use z-index para controlar a ordem de sobreposição.
Perguntas Frequentes
A aula “Posicionamento: relative, absolute, fixed e sticky” é grátis?
Sim — o texto completo de “Posicionamento: relative, absolute, fixed e sticky” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Posicionamento: relative, absolute, fixed e sticky”?
Retire elementos do fluxo normal com valores de position para sobrepor conteúdo, fixar cabeçalhos e criar barras laterais fixas. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Posicionamento: relative, absolute, fixed e sticky”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Seletores e a cascata
- Cores, tipografia e modelo de caixa
- Noções básicas de display: block, inline, flex e grid
- Posicionamento: relative, absolute, fixed e sticky