Revision 20637 of bottom

  • Revision slug: CSS/bottom
  • Revision title: bottom
  • Revision id: 20637
  • 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 of the element is from 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 specific length. Can be negative, zero, or positive.
percentage 
A percentage of the containing box's height.
auto 
Uses the default positioning.
inherit 
Inherits this value from its containing box.

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.

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 of the element is from 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> length </dt><dd> A specific length. Can be negative, zero, or positive.
</dd><dt> percentage </dt><dd> A percentage of the containing box's height.
</dd><dt> auto </dt><dd> Uses the default positioning.
</dd><dt> inherit </dt><dd> Inherits this value from its containing box.
</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>
<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