bottom

  • Revision slug: CSS/bottom
  • Revision title: bottom
  • Revision id: 20649
  • Created:
  • Creator: Bobbo
  • Is current revision? No
  • Comment Remove Example Flag :: Examples Exist in Page

Revision Content

{{template.CSSRef()}}

Summary

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

  • Initial value: auto
  • Applies to: positioned elements
  • Inherited: no
  • Percentages: refer to height of containing block
  • Media: visual
  • Computed value: absolute length, percentage, or auto

Syntax

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

Values

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

Examples

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>

Notes

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 {{template.Cssxref("top")}}, {{template.Cssxref("height")}}, and {{template.Cssxref("margin-top")}} are not auto (which is the default value for top and height).

Specifications

Browser compatibility

This is as far back as the documentaion goes.
Browser Lowest Version
Internet Explorer 5
Firefox 1
Netscape 6
Opera 6

See also

{{template.Cssxref("position")}}, {{template.Cssxref("top")}}, {{template.Cssxref("left")}}, {{template.Cssxref("right")}}

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

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </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 {{template.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> Initial value: auto
</li><li> Applies to: positioned elements
</li><li> Inherited: no
</li><li> Percentages: refer to height of containing block
</li><li> Media: <a href="en/CSS/Media/visual">visual</a>
</li><li> Computed value: absolute length, percentage, or auto
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">   bottom: &lt;length&gt; | &lt;percentage&gt; | auto | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> &lt;length&gt; </dt><dd> A length, used as described in the <a href="#Summary">summary</a>. Can be negative, zero, or positive.
</dd><dt> &lt;percentage&gt; </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 {{template.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 {{template.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 &lt;length&gt;, a &lt;percentage&gt;, or <code>auto</code>
</dd></dl>
<h3 name="Examples"> Examples </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>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Position at bottom, absolute or fixed&lt;/title&gt;
&lt;style type="text/css"&gt;
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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;This&lt;br&gt;is&lt;br&gt;some&lt;br&gt;tall,&lt;br&gt;tall,
    &lt;br&gt;tall,&lt;br&gt;tall,&lt;br&gt;tall&lt;br&gt;content.&lt;/p&gt;
  &lt;div id="fix" class="pos"&gt;&lt;p&gt;Fixed&lt;/p&gt;&lt;/div&gt;
  &lt;div id="abs" class="pos"&gt;&lt;p&gt;Absolute&lt;/p&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<h3 name="Notes"> Notes </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 {{template.Cssxref("top")}}, {{template.Cssxref("height")}}, and {{template.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 name="Specifications"> Specifications </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 name="Browser_compatibility"> Browser compatibility </h3>
<span class="comment">This is as far back as the documentaion goes.</span><table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</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 name="See_also"> See also </h3>
<p>{{template.Cssxref("position")}}, {{template.Cssxref("top")}},  {{template.Cssxref("left")}}, {{template.Cssxref("right")}}
</p>{{ wiki.languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom" } ) }}
Revert to this revision