bottom

CSSbottom プロパティは、位置指定要素 (positioned elements) の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。

bottom の効果は、要素がどの様に配置されているか (つまり、 position プロパティの値) によって変わります。

  • positionabsolute または fixed に設定されている場合、 bottom プロパティは要素の下辺と包含ブロックの下辺との間の距離を指定します。
  • positionrelative に設定されている場合、 bottom プロパティは要素の下辺が通常位置から上方へ移動する量を指定します。
  • positionsticky に設定されている場合、 bottom プロパティは要素がビューポート内にある場合は positionrelative であるかのように、外の場合は positionfixed の場合と同様に動作します。
  • positionstatic に設定されている場合、 bottom プロパティは効果がありません

topbottom の両方が指定されており、 positionabsolute または fixed に設定されており、かつ height が未指定 (auto または 100% のどちらか) の場合は、 topbottom の距離が尊重されます。それ以外の場合、 height が何らかの形で制約されていた場合、または positionrelative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

構文

/* <length> 値 */
bottom: 3px;
bottom: 2.4em;

/* 内包ブロックの高さに対する <percentage> */
bottom: 10%;

/* キーワード値 */
bottom: auto;

/* グローバル値 */
bottom: inherit;
bottom: initial;
bottom: unset;

<length>
負、null、または正の <length> で、以下のものを表します。
  • 絶対位置指定要素の場合は、包含ブロックの下辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの上方向への移動量。
<percentage>
包含ブロックの高さに対する <percentage> です。
auto
以下のように指定します。
  • 絶対位置指定要素では、要素の位置は top プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 topauto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
  • 相対位置指定要素では、通常の位置から要素までの距離は top に基づきます。また、 topauto であった場合は、垂直方向には移動しません。
inherit
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は <length>, <percentage>, または auto キーワードと同様に扱われます。

形式文法

<length> | <percentage> | auto

この例は、 positionabsolutefixed であった場合の bottom プロパティの動作の違いを示します。

HTML

<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55,55,55,.2);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

結果

仕様書

仕様書 状態 備考
CSS Transitions
bottom の定義
草案 bottom をアニメーション可能として定義
CSS Positioned Layout Module Level 3
bottom の定義
草案 sticky の位置の動作を追加
CSS Level 2 (Revision 1)
bottom の定義
勧告 初回定義
初期値auto
適用対象配置された要素
継承なし
パーセンテージ包含ブロックの高さ
メディア視覚
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの種類length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
bottomChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5
補足
完全対応 5
補足
補足 In Internet Explorer versions before 7, when both top and bottom are specified, the element position is overconstrained and the top property has precedence; the computed value of bottom is set to -top, while its specified value is ignored.
Opera 完全対応 6Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報