概要

CSSbottom プロパティは 位置指定された要素 (positioned elements) の位置の指定に関わります。

絶対位置指定要素position absolute または fixed である要素)では、要素のマージン境界の底辺と包含ブロックの底辺の距離を定義します。

相対位置指定要素position relative である要素)では通常位置からの移動距離を定義します。

しかしながら、top プロパティはその bottom プロパティを上書きします。相対位置指定要素では topauto でなければ、bottom の計算値は top の計算値に -1 を掛けたものになります。

初期値auto
適用対象配置された要素
継承不可
相対値の基準包含ブロックの高さ
メディアvisual
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
Animation typelength または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: <length> | <percentage> | auto
bottom: 3px         /* <length> 値 */
bottom: 2.4em

bottom: 10%         /* 包含ブロックの高さの <percentages> */

bottom: auto

bottom: inherit

<length>
次の意味を持つ負、null、または正の <length> です:
  • 絶対位置指定要素 に対しては包含ブロックの底辺までの距離
  • 相対位置指定要素 に対しては、位置指定がされなかった場合の通常フローによる位置からの移動距離
<percentage>
包含ブロックの高さに対する <percentage> で、概要にあるような使い方をします。
auto
次の意味を持つキーワードです:
  • 絶対位置指定要素に対しては、top プロパティを基準にした位置。height: auto をコンテンツを基準にした高さとみなします
  • 相対位置指定要素に対しては、元々の位置からの top プロパティを基準にした距離。topauto である場合は移動しません
inherit
値が、親要素(包含ブロックではないかもしれません)からの計算値であることを示すキーワードです。そしてこの計算値は <length><percentage> または auto キーワードであるかのように扱われます。

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

次のサンプルページでは position:absoluteposition: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 の定義
勧告  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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) ? ? ?

ドキュメントのタグと貢献者

タグ: 
最終更新者: SphinxKnight,