Propriedade CSS top
A propriedade CSS top define a posição superior de um elemento em combinação com a propriedade position. Veja exemplos e experimente você mesmo.
A propriedade CSS top define a posição vertical de um elemento posicionado, medida a partir da borda superior do bloco de referência. Por si só, ela não faz nada — só tem efeito quando o elemento também possui um valor position diferente do padrão static.
Esta página explica como top se comporta para cada valor de position, as unidades que podem ser utilizadas, armadilhas comuns e como ela se combina com bottom, left e right.
Como top funciona
O bloco de referência em relação ao qual top é medido — e o significado do deslocamento — depende do position do elemento:
position: absoluteoufixed—topdesloca o elemento a partir da borda superior do seu bloco contentor (paraabsolute, o ancestral posicionado mais próximo; parafixed, o viewport). Um valor maior detopempurra o elemento mais para baixo.position: relative—topdesloca o elemento para baixo a partir de onde ele normalmente estaria, sem afetar o layout dos elementos ao redor. O espaço que ele ocupava originalmente é preservado.position: sticky—topé a distância a partir do topo do contêiner de rolagem em que o elemento "gruda" durante a rolagem.top: 0faz com que ele grude no topo absoluto.position: static—topé completamente ignorado. Este é o padrão, portanto sempre definapositionprimeiro.
Se tanto top quanto bottom forem especificados em um elemento absolutamente posicionado com altura auto, o elemento será esticado para satisfazer ambos; caso contrário, top prevalece e bottom é ignorado.
Valores negativos são permitidos — top: -20px puxa um elemento com posição absoluta ou fixa acima da sua borda de referência, e puxa um elemento com posição relativa acima da sua posição normal.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Elementos posicionados. |
| Herdado | Não. |
| Animável | Sim. |
| Versão | CSS2 |
| Sintaxe DOM | Object.style.top = "50px"; |
Sintaxe
Sintaxe da propriedade CSS top
top: auto | length | initial | inherit;Exemplo da propriedade top:
Exemplo da propriedade CSS top com valor de comprimento
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 0;
}
.ex2 {
top: 50px;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Resultado
Exemplo da propriedade top com valor negativo:
Exemplo da propriedade CSS top com valor negativo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #666;
height: 200px;
position: relative;
}
p {
margin: 0;
color: #fff;
}
.top {
position: absolute;
top: -35px;
color: #000000;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p>Some text.</p>
<p class="top">Text with the top property.</p>
</div>
</body>
</html>Exemplo da propriedade top definida em "pt", "%" e "em":
Exemplo da propriedade top com valores "pt", "%" e "em":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 5em;
}
.ex2 {
top: 10pt;
}
.ex3 {
top: 75%;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
<p class="ex3">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Valores
| Valor | Descrições | Experimente |
|---|---|---|
| auto | Define a posição da borda superior. É o valor padrão desta propriedade. | Experimente » |
| length | Define a posição da borda superior com px, cm etc. Valores negativos são válidos. | Experimente » |
| % | Define a posição da borda superior com % do elemento contentor. Valores negativos são válidos. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Quando se usa um valor percentual, ele é calculado em relação à altura do bloco contentor, não à sua largura. Portanto, top: 50% em um elemento absolutamente posicionado o move para baixo em metade da altura do elemento pai.
Armadilhas comuns
- Esquecer o
position.topnão tem efeito em um elementostatic. Se o deslocamento parece ser ignorado, verifique sepositionestá definido comorelative,absolute,fixedousticky. - Ancestral posicionado ausente. Um elemento
absoluteé deslocado em relação ao seu ancestral posicionado mais próximo. Se não houver nenhum, ele recorre ao bloco contentor inicial (a raiz do tamanho do viewport). Adicioneposition: relativeao elemento pai para contê-lo. stickynão fica fixo.position: stickysó funciona enquanto o elemento rola dentro de um ancestral que realmente tem overflow. Um valor detopsem contêiner rolável, ou um pai comoverflow: hidden, parecerá não fazer nada.- Usar tanto
topquantobottom. Em um elemento absoluto com alturaauto, eles o esticam; caso contrário,toptem prioridade ebottomé descartado.
Propriedades relacionadas
- position — necessário para que
toptenha efeito. - bottom, left, right — as outras propriedades de deslocamento, usadas em conjunto com
toppara posicionar elementos. - z-index — controla a ordem de empilhamento quando elementos posicionados se sobrepõem.