Posicionamento Fixo e Adesivo
Fixe elementos na janela de visualização ou crie cabeçalhos e barras laterais adesivos durante a rolagem.
Posicionamento Fixo e Adesivo é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 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 CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
position: fixed
Um elemento fixo é posicionado em relação à janela de visualização do navegador e permanece no lugar mesmo quando a página é rolada. Ele também é removido do fluxo do documento.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Casos de uso do posicionamento fixo
Usos comuns de position: fixed:
- Barras de navegação que permanecem no topo
- Botões de ação flutuantes (FABs)
- Elementos de bate-papo no canto inferior direito
- Banners de consentimento de cookies
- Sobreposições modais
Compensando cabeçalhos fixos
Cabeçalhos fixos se sobrepõem ao conteúdo abaixo deles. Adicione um espaçamento interno ou uma margem superior igual à altura do cabeçalho para empurrar o conteúdo para baixo:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Elementos pai com transform e posicionamento fixo
Uma particularidade importante: se um elemento pai tiver um transform, perspective ou filter de CSS aplicado, o posicionamento fixo passa a ser relativo a esse elemento pai, e não à janela de visualização. Esse é um erro comum.
position: sticky
position: sticky é um híbrido: o elemento rola normalmente até atingir um limite definido (por exemplo, top: 0) e então permanece fixo dentro do contêiner pai.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
sticky exige um elemento pai rolável
O elemento sticky permanece fixo dentro do seu bloco de contenção. Se o elemento pai não for alto o suficiente para permitir a rolagem, sticky não terá efeito. O pai deve estar com overflow diferente de hidden.
top, right, bottom e left para sticky
É necessário definir pelo menos um deslocamento para ativar sticky. Padrões comuns:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Cabeçalhos de tabela fixos durante a rolagem
Sticky é perfeito para cabeçalhos de tabelas em contêineres de tabela roláveis — o cabeçalho permanece visível enquanto o usuário percorre as linhas.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Padrão de barra lateral sticky
Uma barra lateral sticky clássica que permanece visível enquanto o conteúdo principal é rolado:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Resumo: fixed vs sticky
Principais diferenças:
- Fixed: sempre relativo à janela de visualização, sempre fora do fluxo
- Sticky: rola com o conteúdo até o limite, permanece no fluxo e para no limite do elemento pai
Desempenho: fixed e camadas
Elementos fixed criam um novo contexto de empilhamento e podem causar uma nova renderização durante a rolagem se sobrepuserem áreas que precisam ser redesenhadas. Mantenha os elementos fixed simples e evite propriedades dispendiosas, como box-shadow, neles.
Verificação rápida
Qual restrição position: sticky tem que position: fixed não tem?
Recapitulação
position: fixed ancora elementos à janela de visualização para criar navegação sticky e sobreposições. position: sticky rola normalmente até um limite e então permanece fixo — perfeito para cabeçalhos de tabelas e barras laterais. Ambos exigem pelo menos uma propriedade de deslocamento para ativar a fixação.
Perguntas Frequentes
A aula “Posicionamento Fixo e Adesivo” é grátis?
Sim — o texto completo de “Posicionamento Fixo e Adesivo” é 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 CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Posicionamento Fixo e Adesivo”?
Fixe elementos na janela de visualização ou crie cabeçalhos e barras laterais adesivos durante a rolagem. Você pratica CSS 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 CSS Academy?
Nenhuma experiência prévia é necessária. CSS 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 3 de 4.
Quanto tempo leva a aula “Posicionamento Fixo e Adesivo”?
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 CSS Academy?
Sim. Cada aula de CSS 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
- Posicionamento Estático e Relativo
- Posicionamento Absoluto e Bloco Contenedor
- Posicionamento Fixo e Adesivo
- Z-Index e Contexto de Empilhamento