Entendendo os 5 Tipos de Posicionamento CSS: Um Guia Prático para Iniciantes
Neste artigo, explicamos com exemplos práticos os cinco tipos de posicionamento CSS (static, relative, absolute, fixed e sticky).
O CSS (Cascading Style Sheets) é uma das ferramentas mais úteis e populares para estilizar páginas web, e o posicionamento de elementos na tela é um dos conceitos mais importantes para aprender a utilizá-la.
Continue lendo para aprender com linguagem simples, imagens e exemplos, como funcionam os tipos de posicionamento e como aplicá-los em seus projetos.
Os cinco tipos de posicionamento CSS definem como um elemento é colocado na página: static (padrão, segue o fluxo), relative (desloca a partir da posição original), absolute (posiciona em relação ao ancestral posicionado), fixed (fixo na tela ao rolar) e sticky (gruda ao atingir um limite de rolagem).
Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Como Vincular HTML e CSS?
Antes de mergulhar no posicionamento, é essencial entender como conectar um arquivo HTML a um arquivo CSS.
- Crie um arquivo index.html com a estrutura padrão HTML5 (use ! + Tab em editores como VS Code para gerar automaticamente).
- Adicione a tag <link> no <head> para vincular o arquivo CSS, assim:
<link rel="stylesheet" href="style.css">- Crie um arquivo style.css na mesma pasta do HTML.
- Use um servidor local (como a extensão Live Server no VS Code) para testar a página.
Dica: Aprenda como configurar seu VSCode da melhor forma para trabalhar com HTML e CSS!
Como Criar e Estilizar uma div com CSS?
Para praticar posicionamento, vamos criar uma div que servirá como uma "caixa" estilizada.
- No HTML, adicione:
<div class="caixa"></div>- No CSS, estilize a classe .caixa:
.caixa {
width: 100px;
height: 100px;
background-color: black;
}Isso cria uma caixa preta de 100x100 pixels dentro de um body que vai de ponta a ponta (1691.33 px).
Você pode adicionar mais caixas com classes diferentes (ex.: .caixa--vermelha com background-color: red) para testar os posicionamentos.
O que é Position: static?
position: static é o posicionamento padrão de todos os elementos HTML. Com static, os elementos seguem o fluxo normal da página, ou seja, são empilhados na ordem em que aparecem no código.
- Exemplo: Se você adicionar duas caixas
<div>sem definir position, a segunda aparece abaixo da primeira, ocupando a linha inteira (se for um elemento de bloco, como uma div). - Não é possível usar propriedades como top, left, right ou bottom com static.
Quando usar?
Use static quando quiser que os elementos sigam a ordem natural da página, sem manipulação de posição.
Como Funciona o Position: relative?
O que é position: relative?
Com relative, o elemento é posicionado relativamente à sua posição original no fluxo da página. Ele continua ocupando seu espaço original, mas pode ser deslocado usando top, left, right ou bottom.
- Exemplo:
.caixa {
position: relative;
left: 50px;
top: 25px;
}Isso move a caixa 50 pixels para a direita e 25 pixels para baixo, mas o espaço original dela na página permanece reservado.
- Z-index: Controla a sobreposição de elementos. Um elemento com z-index: 10 fica à frente de outro com z-index: 5.
Quando usar?
Use relative para ajustes sutis de posição ou para servir como referência para elementos filhos com position: absolute.
HTML e CSS ImpressionadorVocê vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!
Começar agora
Como usar Position: absolute?
O que é position: absolute?
Com absolute, o elemento é retirado do fluxo normal da página e posicionado em relação ao primeiro ancestral com posicionamento (como relative ou absolute). Se não houver ancestral posicionado, ele se posiciona em relação à página inteira.
- Exemplo:
<div class="relative">
<div class="caixa"></div>
</div>.relative {
position: relative;
}
.caixa {
position: absolute;
top: 50%;
left: 50%;
}Isso posiciona a caixa no centro do elemento pai com position: relative.
- Dica: Use top: 0; left: 0; para posicionar no canto superior esquerdo do ancestral ou página.
Quando usar?
Use absolute para posicionar elementos em locais específicos, como overlays, pop-ups ou botões flutuantes.
O que é Position: fixed e Como Usá-lo?
O que é position: fixed?
Com fixed, o elemento é fixado em relação à janela do navegador, ignorando o fluxo da página. Ele não se move ao rolar a página.
- Exemplo: Um cabeçalho fixo no topo da página:
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: brown;
color: white;
z-index: 1;
}- Z-index: Garante que o elemento fixo fique acima de outros elementos.
Quando usar?
Use fixed para cabeçalhos, barras de navegação ou botões flutuantes (ex.: ícone de WhatsApp no canto inferior).
Como Usar Position: sticky?
O que é position: sticky?
Sticky é um híbrido entre relative e fixed. O elemento participa do fluxo normal até atingir um ponto definido (ex.: top: 0), quando se torna "grudento" e fica fixo na tela.
- Exemplo: Um cabeçalho que gruda no topo ao rolar:
header {
position: sticky;
top: 0;
background-color: brown;
color: white;
}- Dica: Defina top, left, right ou bottom para especificar onde o elemento deve "grudar".
Quando usar?
Use sticky para cabeçalhos ou menus que devem ficar visíveis ao rolar, mas respeitam o fluxo inicial da página.
O que é Reset CSS e por que aplicá-lo?
O que é um reset CSS?
Navegadores aplicam estilos padrão (como margens e paddings) que variam entre eles. Um reset CSS zera esses estilos para garantir consistência.
- Exemplo de reset simples:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}- O seletor universal * aplica o reset a todos os elementos.
- box-sizing: border-box garante que width e height incluam padding e bordas.
Quando usar?
Aplique o reset no início do CSS para evitar surpresas com estilos padrão.
Resumo dos Posicionamentos
| Posicionamento | Descrição | Sai do Fluxo? | Referência | Propriedades de Deslocamento |
|---|---|---|---|---|
| static | Padrão, segue o fluxo da página | Não | Nenhuma | Não aplicável |
| relative | Desloca em relação à posição original | Não | Próprio elemento | top, left, right, bottom |
| absolute | Posiciona em relação ao ancestral posicionado | Sim | Ancestral ou página | top, left, right, bottom |
| fixed | Fixo na janela do navegador | Sim | Janela do navegador | top, left, right, bottom |
| sticky | Gruda ao atingir um ponto | Não | Ancestral ou página | top, left, right, bottom |
Conclusão
Dominar os posicionamentos no CSS é essencial para criar layouts modernos e flexíveis. Comece praticando com static e relative, depois experimente absolute, fixed e sticky em projetos reais. Esse é o primeiro passo para implementar esses novos conceitos nos seus projetos!
E se quiser continuar aprendendo com posts como este, confira no nosso blog a seção sobre HTML e CSS e aprenda mais guias práticos!
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Display CSS: Nova Sintaxe e Como Usar
Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
1. Quais são os tipos de posicionamento no CSS?
São cinco: static (padrão), relative, absolute, fixed e sticky. Eles controlam como o elemento se posiciona em relação ao fluxo da página, ao ancestral ou à janela do navegador.
2. Qual a diferença entre position relative e absolute?
O relative desloca o elemento a partir da sua posição original, sem tirá-lo do fluxo; o absolute remove o elemento do fluxo e o posiciona em relação ao ancestral posicionado mais próximo.
3. O que faz o position sticky no CSS?
O sticky mantém o elemento na posição normal até a página rolar até certo ponto; a partir daí, ele 'gruda' na tela (como um cabeçalho fixo) enquanto a seção pai está visível. Precisa de uma propriedade como top definida.
4. Quando usar position fixed?
Use o fixed para elementos que devem ficar visíveis o tempo todo, mesmo ao rolar a página, como menus fixos, botões de ação e barras de navegação. Ele se posiciona em relação à janela do navegador.
