diff options
Diffstat (limited to 'files/pt-pt/web/css/bottom/index.html')
| -rw-r--r-- | files/pt-pt/web/css/bottom/index.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/bottom/index.html b/files/pt-pt/web/css/bottom/index.html new file mode 100644 index 0000000000..2aa2e1e2f7 --- /dev/null +++ b/files/pt-pt/web/css/bottom/index.html @@ -0,0 +1,81 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - Referencia_CSS +translation_of: Web/CSS/bottom +--- +<p> +{{ CSSRef() }} +</p> +<h3 id="Resumo" name="Resumo"> Resumo </h3> +<p>The <code>bottom</code> property specifies part of the position of positioned elements. +</p><p>For absolutely positioned elements (those with <code>position: absolute</code> or <code>position: fixed</code>), it specifies the distance between the bottom margin edge of the element and the bottom edge of its containing block. +</p><p>For relatively positioned elements (those with <code>position: relative</code>), it specifies the amount the element is moved above its normal position. However, the {{ Cssxref("top") }} property overrides the bottom property, so if <code>top</code> is not <code>auto</code>, the computed value of <code>bottom</code> is the negative of the computed value of <code>top</code>. +</p> +<ul><li> Valor inicial: auto +</li><li> Aplica-se a: elementos posicionados +</li><li> Herdado: não +</li><li> Porcentagens: referente à altura do bloco que o contêm. +</li><li> Mídia: <a href="pt/CSS/Media/visual">visual</a> +</li><li> Valor computado: comprimento absoluto, porcentagem ou automático +</li></ul> +<h3 id="Sintaxe" name="Sintaxe"> Sintaxe </h3> +<pre class="eval"> bottom: <length> | <percentage> | auto | inherit +</pre> +<h3 id="Valores" name="Valores"> Valores </h3> +<dl><dt> <length> </dt><dd> A length, used as described in the <a href="#Summary">summary</a>. Can be negative, zero, or positive. +</dd><dt> <percentage> </dt><dd> A percentage of the containing block's height, used as described in the <a href="#Summary">summary</a>. +</dd><dt> <code>auto</code> </dt><dd> For absolutely positioned elements, position the element based on the {{ Cssxref("top") }} property and treat <code>height: auto</code> as a height based on the content. For relatively positioned elements, offset the element from its original position based on the {{ Cssxref("top") }} property, or if <code>top</code> is also <code>auto</code>, do not offset it at all. +</dd><dt> <code>inherit</code> </dt><dd> Inherits the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <length>, a <percentage>, or <code>auto</code> +</dd></dl> +<h3 id="Exemplos" name="Exemplos"> Exemplos </h3> +<pre>element { + position: absolute; + bottom: 20px; + height: 200px; + border: 1px solid #000; +} +</pre> +<p>The following sample page contrasts <code>position:absolute</code> and <code>position:fixed</code>. When the regular text becomes taller than the viewable portion of the page (the browser window's viewport), blocks positioned with <code>position:absolute</code> will scroll with the page, while blocks positioned with <code>position:fixed</code> will not. Note that IE6 does not support <code>position:fixed</code>. +</p> +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> +<title>Position at bottom, absolute or fixed</title> +<style type="text/css"> +p {font-size:30px; line-height:3em;} +div.pos {width:49%; text-align:center; border:2px solid #00f;} +div#abs {position:absolute; bottom:0; left:0;} +div#fix {position:fixed; bottom:0; right:0;} +</style> +</head> +<body> + <p>This<br>is<br>some<br>tall,<br>tall, + <br>tall,<br>tall,<br>tall<br>content.</p> + <div id="fix" class="pos"><p>Fixed</p></div> + <div id="abs" class="pos"><p>Absolute</p></div> +</body> +</html></pre> +<h3 id="Notas" name="Notas"> Notas </h3> +<p>For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element. +</p><p>For absolutely positioned elements, the <code>bottom</code> property has no visible effect when all of {{ Cssxref("top") }}, {{ Cssxref("height") }}, and {{ Cssxref("margin-top") }} are <i>not</i> <code>auto</code> (which is the default value for <code>top</code> and <code>height</code>). +</p> +<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es"> Especificações </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom">CSS 2.1</a> +</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a> +</li></ul> +<h3 id="Compatibilidade_com_navegadores" name="Compatibilidade_com_navegadores"> Compatibilidade com navegadores </h3> +<span class="comment">This is as far back as the documentaion goes.</span><table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versão mais antiga</th> </tr> <tr> <td>Internet Explorer</td> <td>5</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>6</td> </tr> +</tbody></table> +<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m"> Veja também </h3> +<p>{{ Cssxref("bottom") }}, +{{ Cssxref("position") }}, +{{ Cssxref("top") }}, +{{ Cssxref("left") }}, +{{ Cssxref("right") }} +</p><p><span class="comment">Categorias</span> +</p><p><span class="comment">Interwiki Language Links</span> +</p>{{ languages( { "en": "en/CSS/bottom", "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom" } ) }} |