Revision 1046646 of bottom

<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Summary</h2>

<p>The <strong><code>bottom</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property participates in specifying the position of <strong>positioned elements</strong>.</p>

<p>For <strong>absolutely positioned elements</strong>, that is, those whose {{cssxref("position")}} property is set to <code>absolute</code> or <code>fixed</code>, the <code>bottom</code> property specifies the distance between the bottom margin edge of the element and the bottom edge of the block containing the element.</p>

<p>For <strong>relatively positioned elements</strong>, that is, those with whose {{cssxref("position")}} property is set to <code>relative</code>, the <code>bottom</code> property specifies the distance the element's bottom edge is moved above its normal position.</p>

<p>When both {{cssxref("top")}} and <code>bottom</code> are specified, <strong>and</strong> {{cssxref("height")}} is unspecified or either <code>auto</code> or <code>100%</code>, both the {{cssxref("top")}} and <code>bottom</code> distances are respected. In all other situations, if {{cssxref("height")}} is constrained in any way, the {{cssxref("top")}} property takes precedence and the <code>bottom</code> property is ignored.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="brush:css">
/* &lt;length&gt; values */
bottom: 3px;
bottom: 2.4em;

/* &lt;percentages&gt; of the height of the containing block */
bottom: 10%;

/* keyword values */
bottom: auto;
bottom: inherit;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>A negative, <code>null</code>, or positive {{cssxref("")}} that represents:
 <ul>
  <li>for <strong>absolutely positioned elements</strong>, the distance to the bottom edge of the containing block;</li>
  <li>for <strong>relatively positioned elements</strong>, the offset that the element is moved above its position in the normal flow if it wasn't positioned.</li>
 </ul>
 </dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>A {{cssxref("&lt;percentage&gt;")}} of the containing block's height, used as described in the <a href="#Summary">summary</a>.</dd>
 <dt><code>auto</code></dt>
 <dd>Specifies that:
 <ul>
  <li>for <strong>absolutely positioned elements</strong>, the position of the element is based on the {{Cssxref("top")}} property, and <code>height: auto</code> is treated as a height based on the content.</li>
  <li>for <strong>relatively positioned elements</strong>, the offset the element from its original position is based on the {{Cssxref("top")}} property, or if <code>top</code> is also <code>auto</code>, the element is not moved vertically at all.</li>
 </ul>
 </dd>
 <dt><code>inherit</code></dt>
 <dd>Indicates that the value is the same as the computed value from its parent element (which may not be its containing block). This computed value is then handled as if it were a {{cssxref("")}}, {{cssxref("&lt;percentage&gt;")}}, or the <code>auto</code> keyword.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">Examples</h2>

<pre class="brush: css; highlight:[2]">
element { 
    position: absolute;
    bottom: 20px; 
    height: 200px;
    border: 1px solid #000;
}
</pre>

<p>The following sample demonstrates the difference in behavior of the <code>bottom</code> property when {{cssxref("position")}} is <code>absolute</code> versus <code>fixed</code>. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with <code>position:absolute</code> scroll with the page, while blocks positioned with <code>position:fixed</code> don't.</p>

<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&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>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>5<sup>[1]</sup></td>
   <td>6</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] In Internet Explorer versions before 7.0, when both {{cssxref("top")}} and <code>bottom</code> are specified, the element position is over-constrained and the {{cssxref("top")}} property has precedence. In that case the computed value of <code>bottom</code> is set to <code>-top</code>, while its specified value is ignored.</p>