12 minutos de leitura
Autor(a)
Sou Luan Alves, estudante de Análise e Desenvolvimento de Sistemas, instrutor de Desenvolvimento Front-End no Grupo Alura. Estou aqui para ajudar a tirar suas dúvidas, aprender e compartilhar conhecimento. :)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Se você já passou horas tentando posicionar elementos com CSS e nada parece ficar no lugar certo, saiba que isso é mais comum do que parece.
Dúvidas como “como posicionar um elemento no canto com CSS?”, “como fixar um menu no topo da página?” ou “como colocar texto sobre uma imagem?” fazem parte do dia a dia de quem está aprendendo ou aprimorando o uso do CSS.
Esses são desafios clássicos do desenvolvimento front-end, e a resposta para a maioria deles está em uma única propriedade essencial: position CSS.
Muitas pessoas desenvolvedoras iniciantes tentam "empurrar" elementos usando margin e acabam quebrando todo o layout. A verdade é que o position é a ferramenta correta para o trabalho.
Ela é a chave que "destrava" um elemento do seu lugar padrão, te ajuda entender melhor algumas classes no CSS e lhe dá superpoderes para controlar sua localização exata na página.
Neste guia completo sobre position no CSS, você vai aprender na prática como utilizar cada um dos seus valores: static, relative, absolute, fixed e sticky, com exemplos reais. Ao final, você terá segurança para posicionar menus, imagens e qualquer outro componente do seu layout sem depender de “gambiarras”.
Por padrão, todo elemento que você escreve no seu HTML segue o chamado fluxo normal do documento (normal document flow). Pense nisso como um texto em uma folha: cada parágrafo (<p>) aparece logo abaixo do anterior, respeitando uma ordem de cima para baixo.
Elementos de bloco, como <div>, ocupam toda a largura disponível e sempre começam em uma nova linha. Já elementos inline, como <span> ou <a>, se organizam lado a lado, ocupando apenas o espaço necessário.
Esse comportamento padrão é controlado pelo valor position: static, que é aplicado automaticamente a todos os elementos.
A propriedade position no CSS permite que você quebre esse fluxo.
Ao mudá-la para um valor diferente de static, você ganha acesso a um novo conjunto de propriedades auxiliares, às vezes chamadas de placement css ou propriedades de localização:
Essas quatro propriedades são o seu "GPS". Elas dizem ao navegador onde posicionar o elemento em relação a um ponto de referência.
Mas aqui está o ponto importante: o comportamento dessas propriedades depende diretamente do valor de position utilizado. Em outras palavras, o ponto de referência pode mudar, pode ser a própria tela, o elemento pai ou até a posição original do elemento no fluxo.
E existe uma regra de ouro que evita muita dor de cabeça: top, right, bottom e left não têm nenhum efeito quando o elemento está com position: static.
Vamos analisar como cada valor funciona, do mais simples ao mais avançado.
Como já dissemos, este é o valor padrão para todo elemento HTML.
Neste CodePen note que mesmo com top: 20px aplicado, o elemento não se move, pois seu position é static.
Aqui as coisas começam a ficar interessantes. O position: relative é, talvez, o valor mais importante para entender, não tanto pelo que ele faz sozinho, mas pelo que ele permite que outros elementos façam.
◦ Mover o elemento: Se você aplicar top: 20px, o elemento se moverá 20 pixels para baixo da sua posição original. Importante: ele ainda ocupa seu espaço original no fluxo, podendo sobrepor outros elementos.
◦ Criar um Contexto de Posicionamento: Esta é a função mais crucial. Ao definir um elemento como relative, ele se torna a "âncora" ou o "ponto de referência" para qualquer elemento filho que tenha position: absolute.
◦ Para pequenos ajustes de posicionamento (embora transform: translate() seja muitas vezes preferido hoje em dia).
◦ Principalmente: Para ser o "elemento pai" de um position: absolute.
Neste exemplo no CodePen, o elemento se move 50px para baixo e 50px para a direita de onde ele deveria estar originalmente.
Esse valor proporciona grande controle sobre o posicionamento, porém, costuma gerar dúvidas para quem está começando.
◦ O que é um "ancestral posicionado"? É o primeiro elemento pai (ou avô, ou bisavô...) que tenha um position diferente de static (ou seja, relative, absolute, fixed ou sticky).
◦ Se o absolute não encontrar nenhum ancestral posicionado, seu ponto de referência se torna o bloco inicial da página, geralmente o próprio <html> (é aqui que o termo html position às vezes é usado).
A Batalha: position: relative vs position: absolute
A maior confusão do CSS mora aqui. A melhor forma de entendê-los é em conjunto.
Na maioria das vezes, você usará position: relative e position: absolute juntos.
Vamos ver os dois cenários que o artigo original descreve:
Cenário 1 (Correto): Pai com relative O pai (caixa verde) é relative. O filho (caixa azul) é absolute. O filho se posiciona 50px para dentro do pai, como esperado.
Veja aqui.
Cenário 2 (Incorreto): Pai com static O pai (caixa verde) é static (padrão). O filho (caixa azul) é absolute. Como o filho não encontra um ancestral posicionado, ele "ignora" o pai e se posiciona em relação ao corpo do documento.
Veja aqui.
O position: fixed tem um comportamento visual mais direto e simples de observar.
Teste nesse exemplo. Role a página e veja que o elemento não se move.
O valor sticky é mais recente e combina características dos valores relative e fixed.
Neste exemplo, role o conteúdo. O elemento sobe normalmente, mas "gruda" no topo (a 0px) e à esquerda (a 0px) quando você rola.
Quando você começa a usar position: relative, absolute, fixed ou sticky, seus elementos saem do plano 2D e entram no eixo Z (profundidade). Eles podem se sobrepor.
Mas quem fica por cima?
É aí que entra o z-index. Esta propriedade define a "ordem da pilha" dos elementos.
O z-index é fundamental, mas ele funciona dentro de "Contextos de Empilhamento" (Stacking Contexts).
Um elemento com position: relative e z-index: 1 cria um novo contexto. Qualquer z-index dos seus filhos (mesmo z-index: 9999) só vale dentro desse pai.
Vamos usar o que aprendemos para resolver um dos problemas mais comuns: como posicionar uma imagem em CSS com um texto por cima, criando um "card".
O Problema: Você tem uma imagem e um título, mas o título fica abaixo da imagem (fluxo normal). Você quer o título sobre a imagem, no canto inferior esquerdo.
O HTML: Primeiro, precisamos de um contêiner "pai" para os dois elementos:
```
<div class="card-container">
<img
src="https://i.imgur.com/phJa5N0.png"
alt="Um notebook exibindo código em um escritório moderno."
>
<h3 class="card-titulo">Meu Artigo Incrível</h3>
</>
```
: " " + :
```
{
: relative;
: ;
: ;
: hidden;
}
{
: ;
: block;
}
{
: absolute;
: ;
: ;
: white;
: ;
: (,,,);
: ;
}
```Com esse código, o .card-titulo é removido do fluxo e posicionado de forma absoluta em relação ao .card-container (que é relative). Especificamente sobre ajustes de imagens, também vale conferir nosso artigo sobre Object-fit.
Dominar a propriedade position é um rito de passagem. É o ponto em que você deixa de lutar contra o CSS e começa a ditar as regras do layout.
O que parecia mágica, como menus fixos, medidas relativas, elementos sobrepostos, layouts complexos, agora é apenas mais uma ferramenta no seu arsenal.
Esse controle é o que diferencia uma pessoa desenvolvedora iniciante de um(a) profissional Front-end confiante.
Dominar o position CSS não é apenas sobre fazer layouts bonitos; é sobre ser o profissional que consegue traduzir um design complexo do Figma para o navegador com precisão de pixel perfect.
É sobre construir interfaces que não apenas funcionam, mas que são intuitivas e agradáveis de usar.
Para construir essa base sólida, da propriedade position ao Flexbox, do Grid até os frameworks JavaScript mais modernos como React e Vue, a Alura é sua principal aliada.
Nossas Carreiras de Front-End são desenhadas para te levar do zero absoluto até o nível profissional, com uma didática "mão na massa", projetos práticos para seu portfólio e o apoio da maior comunidade de tecnologia do Brasil.
Ao longo dessa jornada, você também desenvolve habilidades essenciais de construção de interfaces modernas com conteúdos como o curso de CSS posicionando elementos com Flexbox, fundamental para estruturar layouts responsivos e profissionais no dia a dia.
E para quem já domina o Front-end e busca o próximo salto estratégico, seja para liderar projetos, desenhar a arquitetura de sistemas web complexos ou gerenciar equipes de desenvolvimento, a FIAP oferece os MBAs e pós-graduações mais reconhecidos do mercado.
Esse é um caminho para quem deseja atuar também na definição de estratégias e arquitetura por trás das interfaces
position: relative move o elemento em relação à sua posição original no fluxo da página, e o mais importante, cria um contexto de posicionamento para seus filhos.
Ele ainda ocupa seu espaço original. position: absolute move o elemento em relação ao seu ancestral posicionado mais próximo (ou ao <html>). Ele é removido do fluxo da página.
Esses são termos informais para se referir às quatro propriedades auxiliares top, right, bottom e left, que ficam disponíveis ao definir position diferente de static.
Centralizar vertical e horizontalmente com absolute é um truque clássico. A forma mais moderna é:
.elemento-absoluto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Isso move o ponto de âncora do elemento (canto superior esquerdo) para o centro do pai, e o transform "puxa" o elemento de volta pela metade da sua própria altura e largura, centralizando-o perfeitamente.
Avalie este artigo
Next.JS: aplicações fullstack com super poderes
Ler mais
Pixel art nos jogos: o que é e como fazer animações
Ler mais
Como usar bibliotecas de terceiros com TypeScript?
Ler mais