bottom

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

Valor inicial: auto
Aplica-se a: elementos posicionados
Herdado: não
Porcentagens: referente à altura do bloco que o contêm.
Mídia: visual
Valor computado: comprimento absoluto, porcentagem ou automático

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 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 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" 
   "https://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 top, height, and 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

bottom, position, top, left, right

Categorias

Interwiki Language Links