files/pt-pt/web/css/top/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

---
title: top
slug: Web/CSS/top
translation_of: Web/CSS/top
---
<p><span class="lang lang-en">« <a href="/pt/Referência_CSS" title="pt/Referência CSS">Referência CSS</a><br>
</span></p>
<h3 id="Resumo"><span class="lang lang-en">Resumo</span></h3>
<p>A propriedade <code>top</code> especifica o posicionamento vertical do elemento de acordo com o topo.</p>
<p>Para elementos absolutamente posicionados (com a propriedade <code>position</code> ajustada como <code>absolute</code> ou <code>fixed</code>) especifica a distância apartir a margem superior do objeto (até onde vai o <code>background</code>).</p>
<p>Para relativamente posicionados (com a propriedade <code>position</code> ajustada como <code>relative</code>) especifica a distância de acordo com o posicionamento do objeto se a propriedade position fosse qualquer uma que não <code>absolute</code>, <code>relative</code> ou <code>fixed</code>.</p>
<ul> <li>Valor inicial: auto</li> <li>Aplica-se a: <a href="/pt/CSS/position" title="pt/CSS/position">Elementos posicionados</a></li> <li>Herdado: não</li> <li>Porcentagens: Referente a altura do próximo antecedente de posição block</li> <li>Valor computado: distância absoluta, porcentagem ou automático</li>
</ul>
<h3 id="Sintáxe">Sintáxe</h3>
<pre class="eval">top: &lt;length&gt; | &lt;percentage&gt; | auto | inherit
</pre>
<h3 id="Exemplos">Exemplos</h3>
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
&lt;title&gt;Mozilla.org altura, topo, esquerda, largura e direita - CSS&lt;/title&gt;
&lt;style type="text/css"&gt;
/* 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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;center&gt;
  &lt;div&gt;...Qualquer conteúdo...&lt;/div&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 id="Notas">Notas</h3>
<p><code>top</code> é mais relevante que bottom porque o alinhamento vertical padrão é no topo. Com mais propriedades de posicionamento, top torna-se dispensável.</p>
<h3 id="Veja_mais">Veja mais</h3>
<p><a href="/pt/CSS/position" rel="custom nofollow" title="pt/CSS/position">position</a>, <a href="/pt/CSS/right" rel="custom nofollow" title="pt/CSS/right">right</a>, <a href="/pt/CSS/bottom" rel="custom nofollow" title="pt/CSS/bottom">bottom</a>, <a href="/pt/CSS/left" rel="custom nofollow" title="pt/CSS/left">left</a></p>