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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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
Etiquetas do documento e colaboradores
Colaboradores para esta página:
teoli,
Half-blood
Última atualização por:
teoli,