--- title: bottom slug: Web/CSS/bottom tags: - Referencia_CSS translation_of: Web/CSS/bottom ---

{{ CSSRef() }}

Resumo

The bottom property specifies part of the position of positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the bottom margin edge of the element and the bottom edge of its containing block.

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved above its normal position. However, the {{ Cssxref("top") }} property overrides the bottom property, so if top is not auto, the computed value of bottom is the negative of the computed value of top.

Sintaxe 

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

Valores

<length> 
A length, used as described in the summary. Can be negative, zero, or positive.
<percentage> 
A percentage of the containing block's height, used as described in the summary.
auto 
For absolutely positioned elements, position the element based on the {{ Cssxref("top") }} property and treat height: auto 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 top is also auto, do not offset it at all.
inherit 
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 auto

Exemplos 

element {
    position: absolute;
    bottom: 20px;
    height: 200px;
    border: 1px solid #000;
}

The following sample page contrasts position:absolute and position:fixed. When the regular text becomes taller than the viewable portion of the page (the browser window's viewport), blocks positioned with position:absolute will scroll with the page, while blocks positioned with position:fixed will not. Note that IE6 does not support position:fixed. 

<!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>

Notas

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.

For absolutely positioned elements, the bottom property has no visible effect when all of {{ Cssxref("top") }}, {{ Cssxref("height") }}, and {{ Cssxref("margin-top") }} are not auto (which is the default value for top and height).

Especificações

Compatibilidade com navegadores

This is as far back as the documentaion goes.
Navegador Versão mais antiga
Internet Explorer 5
Firefox 1
Netscape 6
Opera 6

Veja também

{{ Cssxref("bottom") }}, {{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("left") }}, {{ Cssxref("right") }}

Categorias

Interwiki Language Links

{{ languages( { "en": "en/CSS/bottom", "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom" } ) }}