bottom

基準となる位置の下辺からの距離を指定します。この『bottom』プロパティは『position』プロパティが『static』以外の値に指定されていた場合のみ反映されます。

サンプルコード

style.css

/* 自動配置（初期値） */
div.test { bottom: auto;}

/* 50pxの距離に配置 */
div.test1 { bottom: 50px;}

/* 包含ブロックの高さの10%の距離に配置 */
div.test2 { bottom: 10%;}

/* マイナス値で下方向に飛び出す */
div.test3 { bottom: -20px;}

/* position: fixed で画面下部に固定する実践例（フッターやSNSボタン等） */
.fixed-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

/* position: absolute で親要素の下部に絶対配置する実践例 */
.parent { position: relative;}
.child-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

/* position: sticky で要素が下辺に到達したら固定 */
.sticky-bottom {
	position: sticky;
	bottom: 20px;
}

指定可能な値一覧

値	概要
auto	『top』プロパティから計算された位置で配置します。『top』プロパティの値も『auto』だった場合は位置の移動は行われません。これが初期値です。
数値	数値で指定します。『position』プロパティの値が『relative』だった場合は通常のドキュメントフローで配置されるはずだった位置の下辺からの距離、『absolute』だった場合は基準となる包含ブロックの下辺からの距離を指定する値となります。使用できる単位は『px』や『%』などです。『%』を使用した場合は包含ブロック(基準となる位置を決定付けしている要素)の高さから算出された相対値で位置移動が行われます。

値

概要

auto

『top』プロパティから計算された位置で配置します。『top』プロパティの値も『auto』だった場合は位置の移動は行われません。これが初期値です。

数値

数値で指定します。『position』プロパティの値が『relative』だった場合は通常のドキュメントフローで配置されるはずだった位置の下辺からの距離、『absolute』だった場合は基準となる包含ブロックの下辺からの距離を指定する値となります。使用できる単位は『px』や『%』などです。『%』を使用した場合は包含ブロック(基準となる位置を決定付けしている要素)の高さから算出された相対値で位置移動が行われます。

ブラウザでの表示結果

以下の『bottom』プロパティを設定しているdiv要素は『position: relative』と指定のあるdiv要素(赤枠の要素)の中に配置しており、赤枠の要素が基準となっています。

<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;">
	<div style="bottom: 50px; position: relative; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『bottom: 50px』、『position: relative』を指定しています。</div>
</div>

<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 400px auto 50px;">
	<div style="bottom: 50px; position: absolute; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『bottom: 50px』、『position: absolute』を指定しています。親要素の高さはこの要素の高さを算出できないため『0』となります。</div>
</div>