Propriedade top

A propriedade top define a posição da borda superior do elemento em relação ao topo do elemento pai. Os valores para a propriedade podem ser escritos com as unidades de medida comuns, por exemplo, em pixels, polegadas, pontos, porcentagem. Os valores definidos também podem ser números negativos, neste caso, os elementos se sobreporão uns aos outros. A contagem das coordenadas é determinada pela propriedade position, que geralmente assume o valor relative (posição relativa) ou absolute (posição absoluta).

Sintaxe

cssseletor {
  top: tamanho ou auto;
}

Exemplo

Vamos, ao passar o mouse sobre o elemento filho, definir a posição da sua borda superior como 25px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
  margin-left: 50px;
}
p:hover {
  top: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Exemplo

E agora, ao passar o mouse, deixe a borda superior do elemento filho posicionada em -50px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  margin-top: 50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  top: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Veja também