概要
CSS の bottom プロパティは 位置指定された要素 (positioned elements) の位置の指定に関わります。
絶対位置指定要素（ position が absolute または fixed である要素）では、要素のマージン境界の底辺と包含ブロックの底辺の距離を定義します。
相対位置指定要素（ position が relative である要素）では通常位置からの移動距離を定義します。
しかしながら、top プロパティはその bottom プロパティを上書きします。相対位置指定要素では top が auto でなければ、bottom の計算値は top の計算値に -1 を掛けたものになります。
| 初期値 | auto |
|---|---|
| 適用対象 | 配置された要素 |
| 継承 | 不可 |
| 相対値の基準 | 包含ブロックの高さ |
| メディア | visual |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto |
| アニメーションの可否 | 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc(); |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
形式文法: <length> | <percentage> | auto
bottom: 3px /* <length> 値 */ bottom: 2.4em bottom: 10% /* 包含ブロックの高さの <percentages> */ bottom: auto bottom: inherit
値
<length>- 次の意味を持つ負、null、または正の
<length>です:- 絶対位置指定要素 に対しては包含ブロックの底辺までの距離
- 相対位置指定要素 に対しては、位置指定がされなかった場合の通常フローによる位置からの移動距離
<percentage>- 包含ブロックの高さに対する
<percentage>で、概要にあるような使い方をします。 auto- 次の意味を持つキーワードです:
inherit- 値が、親要素（包含ブロックではないかもしれません）からの計算値であることを示すキーワードです。そしてこの計算値は
<length>、<percentage>またはautoキーワードであるかのように扱われます。
例
element {
position: absolute;
bottom: 20px;
height: 200px;
border: 1px solid #000;
}
次のサンプルページでは position:absolute と position:fixed を比較します。通常のテキストの高さがページの可視領域（ブラウザのウィンドウのビューポート）よりも高くなると、position:absolute の指定されたブロックはページとともにスクロールしますが、position:fixed の指定されたブロックはしません。
<!DOCTYPE html>
<html>
<head>
<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>
仕様書
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Level 2 (Revision 1) bottom の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 5 | 6 | 1.0 (85) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | 1.0 (1.9.2) | ? | ? | ? |