bottom

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

試してみましょう

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

  • positionabsolute または fixed に設定されている場合、 bottom プロパティは要素の下マージンの外側の辺と、包含ブロックの下パディングの外側の辺との間の距離を指定します。
  • positionrelative に設定されている場合、 bottom プロパティは要素の下辺が通常位置から上方向へ移動する量を指定します。
  • positionsticky に設定されている場合、 bottom プロパティは sticky 制約の矩形を計算するために使用されます。
  • positionstatic に設定されている場合、 bottom プロパティは効果がありません

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

構文

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

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

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

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

<length>

負、null、または正の <length> で、以下のものを表します。

  • 絶対位置指定要素の場合は、包含ブロックの下辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの上方向への移動量。
<percentage>

包含ブロックの高さに対する <percentage> です。

auto

以下のように指定します。

  • 絶対位置指定要素では、要素の位置は top プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 topauto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
  • 相対位置指定要素では、通常の位置から要素までの距離は top に基づきます。また、 topauto であった場合は、垂直方向には移動しません。
inherit

値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は <length>, <percentage>, または auto キーワードと同様に扱われます。

公式定義

初期値auto
適用対象位置指定要素
継承なし
パーセント値包含ブロックの高さに対する相対値
計算値長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では auto
アニメーションの種類length または パーセント値, calc();

形式定義

bottom = 
auto |
<length-percentage>

<length-percentage> =
<length> |
<percentage>

絶対位置指定と固定位置指定

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

HTML

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

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

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

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

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

結果

仕様書

Specification
CSS Positioned Layout Module Level 3
# insets

ブラウザーの互換性

BCD tables only load in the browser

関連情報