Carregando...

Position em CSS

As lições de fluxo ensinaram as caixas a entrar numa linha. position responde a outra pergunta: onde esta caixa se senta em relação ao lugar normal, a um ancestral ou ao ecrã? Domine os cinco valores do dia a dia antes de empilhar ou usar truques com float.

Um kit de ferramentas position

📊 Position num olhar

Valor	Trabalho quotidiano
`static`	Predefinição — offsets como top/left quase não servem
`relative`	Desloca do sítio normal; mantém o espaço; pode ancorar filhos absolute
`absolute`	Sai do fluxo normal; coloca-se face ao ancestral posicionado mais próximo
`fixed`	Sai do fluxo; fixa-se no viewport enquanto faz scroll
`sticky`	Age como relative até um limiar de scroll, depois cola dentro do contentor

Os offsets top, right, bottom e left só importam quando position não é static. Escolha primeiro o modo e depois afine o offset.

Relative — um empurrão educado

relative mantém o elemento no fluxo. O espaço original continua reservado. Offsets pequenos são ótimos para ajustes óticos — e para marcar um pai que os filhos absolute devem obedecer.

Empurrão relative

css

.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — sair do fluxo

absolute tira a caixa do fluxo normal. Os vizinhos fecham o espaço. A colocação usa o ancestral mais próximo com position diferente de static — muitas vezes um pai relative. Sem essa âncora, o elemento pode subir a um bloco contêiner maior.

Distintivo absolute

css

.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

Dê um lar ao absolute

Emparelhe filhos absolute com um pai intencional. Nomeie a relação com classes para o layout ficar legível.

Pai posicionado

css

.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — colado ao viewport

fixed fixa o elemento no ecrã. Fazer scroll da página não o move. Use para avisos calmos ou barras de ferramentas — não como atalho para cada layout em colunas.

Aviso fixed

css

.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — relative, depois colado

sticky fica no fluxo até ultrapassar um limiar de scroll (top é comum), depois cola dentro do ancestral com scroll. Precisa de espaço para scroll e de um pai sensato — senão parece partido.

Rótulo de secção sticky

css

.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

Um hábito calmo de position

Use relative para pequenos empurrões e âncoras absolute. Use absolute para distintivos e sobreposições dentro de um pai conhecido. Reserve fixed e sticky para chrome intencional. Deixe stacking com z-index e limpeza de float para as suas lições.

Papéis de position nomeados

css

.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

Experimente você

Empurre uma .card com position: relative e valores pequenos de top / left.
Coloque um .badge com absolute dentro de um pai .media relative.
Adicione um aviso pequeno fixed num canto — faça scroll e veja-o ficar.
Experimente um rótulo sticky com top: 0 numa secção alta com scroll.
Escreva uma frase: quando absolute é mais seguro do que fixed?

Erros comuns

Usar absolute sem pai posicionado e perguntar por que salta longe
Recorrer a fixed para resolver layout normal de página
Esperar que sticky funcione sem overflow de scroll ou com ancestrais em conflito
Tratar esta lição como a de filas inline-block (outro trabalho)
Despejar aqui receitas de z-index ou float em vez de aprender modos de colocação

Resumo

position controla a colocação relativamente ao fluxo, ancestrais ou viewport
relative empurra e ancora; absolute sai do fluxo dentro dessa âncora
fixed fixa no viewport; sticky mistura comportamento relative e colado
Offsets só importam quando position não é static
Deixe stacking e float para depois — domine primeiro os cinco modos

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma