Propriedade Position
Última atualização: 2026-09-13
position Propriedade Position
A propriedade position especifica como um elemento é posicionado, se permanece no fluxo do documento ou é deslocado em relação a algum ponto de referência. Combinada com as propriedades top, right, bottom e left, permite posicionamento relativo, absoluto, fixo e sticky para efeitos comuns de layout.
| Categoria | |
|---|---|
| Valor Inicial | static |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
position: static | relative | absolute | fixed | sticky;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
static | relative | absolute | fixed | sticky | Palavra-chave | Tipo de posicionamento: static/relative/absolute/fixed/sticky. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Um elemento absolute é posicionado em relação ao seu ancestral não-estático mais próximo, então você geralmente precisa dar ao pai position:relative como referência de posicionamento.
Aviso： Um elemento fixed é posicionado em relação à viewport; navegadores móveis variam no suporte, o que pode causar tremulação ou desalinhamento em alguns casos.
❓ Perguntas Frequentes
QQual é a diferença entre absolute e relative?
AUm elemento relative permanece no fluxo do documento, então deslocamentos como top e left o movem de seu lugar original enquanto seu espaço original é preservado. Um elemento absolute é retirado do fluxo, não ocupa espaço e é posicionado em relação ao seu ancestral posicionado não-estático mais próximo; se não houver, posiciona-se em relação à viewport. Mnemônico: relative move o elemento e mantém seu lugar; absolute sai do fluxo e ancora a um ancestral.
QComo sticky e fixed são diferentes?
Afixed sempre posiciona em relação à viewport e permanece fixo durante a rolagem, fora do fluxo. sticky combina relative e fixed: antes de cruzar um limite de rolagem comporta-se como relative e rola com o conteúdo; após o limite, gruda como fixed, mas apenas dentro dos limites do pai. sticky requer um limite como top, e seu pai não deve ter overflow:hidden.
QAo que o position:absolute é posicionado em relação?
AUm elemento absolute é posicionado em relação à caixa de padding de seu ancestral posicionado mais próximo, ou seja, um elemento cujo position não é static. Se todos os ancestrais forem static, ele recai no bloco contêiner inicial, geralmente a viewport. Por isso o padrão comum é dar ao pai position:relative como contexto de posicionamento, para que os deslocamentos absolute de um filho sejam calculados em relação ao contêiner pai.
QPor que o position:sticky não está funcionando?
ACausas comuns: primeiro, o contêiner pai não é alto o suficiente, não sobrando espaço para rolar; segundo, o pai ou um ancestral define overflow:hidden, auto ou scroll, o que quebra o sticky; terceiro, nenhum limite como top ou bottom está definido; quarto, o elemento está dentro de um contêiner que não pode rolar. Verifique estes um a um, prestando atenção especial ao overflow nos ancestrais.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
top / right / bottom / left
Propriedades de deslocamento usadas com position.
z-index (Ordem de Empilhamento)
Controla a ordem de empilhamento dos elementos posicionados.
