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

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

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

topbottom の両方が指定されており、かつ height が未指定か auto100% の場合、 topbottom の距離が尊重されます。それ以外の場合、 height が何らかの形で制約されていた場合、 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();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11215161
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

1. 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.

関連情報

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

最終更新者: mfuji09,