Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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

Etiquetas do documento e colaboradores

Etiquetas: 
 Última atualização por: teoli,