Propriedade Top
Última atualização: 2026-09-13
top Propriedade Top
A propriedade top define o deslocamento de um elemento posicionado a partir da borda superior do seu bloco de contenção. Ela só se aplica a elementos cujo position é relative, absolute, fixed ou sticky e é usada para controlar com precisão a posição vertical de um elemento.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | elementos posicionados |
| Tipo de Animação | length |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
top: auto | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Sem deslocamento. |
<length> | <percentage> | Tipo | Um valor de deslocamento relativo ao bloco de contenção. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| top | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： O top afeta apenas elementos posicionados (não estáticos); defini-lo em um elemento position:static não tem efeito.
Dica： A porcentagem é calculada com base na altura do bloco de contenção; o valor auto deixa o navegador resolver a posição a partir de outras propriedades.
❓ Perguntas Frequentes
QO que acontece quando top e bottom são definidos juntos?
ADepende. Para elementos absolute ou fixed sem uma altura definida, o elemento se estica para preencher o espaço entre top e bottom, resultando em uma altura adaptável. Com posicionamento relative, o top prevalece e o bottom é ignorado. Se uma altura também for definida, o top prevalece e o bottom é ignorado. Esse comportamento é frequentemente usado para esticar elementos verticalmente dentro de um pai, como camadas de fundo de altura total.
QA porcentagem do top é relativa a quê?
AA porcentagem é calculada em relação à altura do bloco de contenção. Para elementos absolute, o bloco de contenção é a padding box do ancestral posicionado mais próximo; para fixed, é a viewport; para relative, é a posição original do próprio elemento. Assim, top:50% coloca a borda superior do elemento na metade da altura do bloco de contenção, frequentemente combinado com transform:translateY(-50%) para centralização vertical, já que o transform desloca o elemento metade da sua própria altura.
QPor que o top não está funcionando?
AO motivo mais comum é que o elemento não está posicionado: o top só funciona em elementos com position relative, absolute, fixed ou sticky e é totalmente ignorado quando é static, o padrão. Verifique também se o valor é válido, ou seja, auto, length ou porcentagem, e se não está sendo sobrescrito por propriedades como height. Confirme o position primeiro e depois verifique o cálculo do deslocamento.
QComo centralizo verticalmente com top:50%?
ADefina o elemento como position:absolute, com o pai como position:relative, use top:50% para que a borda superior fique no meio do container e aplique transform:translateY(-50%) para subir metade da sua própria altura. Isso é centralização vertical. Observe que o transform move o elemento 50% da sua própria altura, o que é diferente do funcionamento da porcentagem do top, e os dois juntos são necessários para uma centralização real independentemente do tamanho do conteúdo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade position
Conheça os pré-requisitos para o top ter efeito.
bottom (Deslocamento Inferior)
A propriedade que desloca a partir da borda inferior.
