mozilla

Revision 20640 of bottom

  • Revision slug: CSS/bottom
  • Revision title: bottom
  • Revision id: 20640
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment /* Summary */

Revision Content

{{template.CSSRef()}}

Summary

The bottom 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. Can be negative, zero, or positive.
<percentage> 
A percentage of the containing block's height.
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 this value from its parent.

Examples

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

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")}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>bottom</code> bottom 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. Can be negative, zero, or positive.
</dd><dt> &lt;percentage&gt; </dt><dd> A percentage of the containing block's height.
</dd><dt> auto </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> inherit </dt><dd> Inherits this value from its parent.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<pre>element { 
    position: absolute;
    bottom: 20px; 
    height: 200px;
    border: 1px solid #000;
}
</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>
Revert to this revision