top

« Referência CSS

Resumo

A propriedade top especifica o posicionamento vertical do elemento de acordo com o topo.

Para elementos absolutamente posicionados (com a propriedade position ajustada como absolute ou fixed) especifica a distância apartir a margem superior do objeto (até onde vai o background).

Para relativamente posicionados (com a propriedade position ajustada como relative) especifica a distância de acordo com o posicionamento do objeto se a propriedade position fosse qualquer uma que não absolute, relative ou fixed.

  • Valor inicial: auto
  • Aplica-se a: Elementos posicionados
  • Herdado: não
  • Porcentagens: Referente a altura do próximo antecedente de posição block
  • Valor computado: distância absoluta, porcentagem ou automático

Sintáxe

top: <length> | <percentage> | auto | inherit

Exemplos

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<title>Mozilla.org altura, topo, esquerda, largura e direita - CSS</title>
<style type="text/css">
/* As medidas de body podem ser mudadas para px para testar o comportamento da div */
body{
  width: 100%;
  height: 100%;
}
/* agora a div pode operar com porcentagem (a altura e a largura do body são a referência) */
div{
  position: absolute;
  left: 15%;
  top: 30%;
  bottom: 30%;
  width: 70%;
  height: 40%;
  text-align: left;
  border: 3px #000 solid;
  background: #CCC;
}
</style>
</head>
<body>
<center>
  <div>...Qualquer conteúdo...</div>
</center>
</body>
</html>

Notas

top é mais relevante que bottom porque o alinhamento vertical padrão é no topo. Com mais propriedades de posicionamento, top torna-se dispensável.

Veja mais

position, right, bottom, left

Document Tags and Contributors

Contributors to this page: Half-blood
Last updated by: Half-blood,