bottom:位置指定で配置された要素の下辺からの距離を指定する

初期値 auto
適用対象 位置指定された要素
継承 しない
アニメーション <length>値、<percentage>値、calc();
対応ブラウザ caniuseで確認

bottomプロパティの説明

bottomは、位置指定された要素の包含ブロックの下辺からの距離を指定します。これは、対象となる要素にpositionが与えられており、かつその値がstatic以外の場合に有効となります。

この機能の振る舞いは位置指定の状態に影響を受けます。具体的な特徴は以下の通りです。

  • positionの値がabsoluteまたはfixedの場合、bottomは包含ブロックの下辺からの距離を決定します
  • positionの値がrelativeの場合、bottomは元の位置から上へ移動する相対距離を表します
  • positionの値がstickyの場合、bottomは粘着を開始するしきい値の計算に使われます
  • positionの値がstaticの場合、bottomは無効になります

位置指定に関するプロパティには以下のものがあり、これを複数組み合わせて使用します。

  • 上辺からの距離:top
  • 右辺からの距離:right
  • 下辺からの距離:bottom
  • 左辺からの距離:left
  • 重なり合う順序:z-index

bottomに指定できる値

auto
既定値に従います。topが指定されていた場合は、その値が採用されます。
<length>
包含ブロックの下辺との距離を数値と長さの単位で指定します。一般的にはpxやemを使用します。
<percentage>
包含ブロックの高さに対する割合で配置位置を指定します。

bottomの使い方とサンプル

bottomプロパティの構文は以下の通りです。

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

/* <length>値 */
bottom: 10px;
bottom: -10px;
bottom: 1.8em;
bottom: 5vh;

/* <percentage>値 */
bottom: 10%;
bottom: -10%;

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

bottomの実例

それでは実際にbottomプロパティの書き方を見ていきましょう。位置指定の機能は、対象となる要素にpositionが与えられており、かつその値がstatic以外の場合に有効となります。加えて、positionの値に応じて位置指定の基準が変わるため、ここでは各値の挙動を分けて解説します。

positionの値がabsoluteの場合

positionプロパティの値がabsoluteの場合、bottomは自身の下辺と包含ブロックの下辺との距離を表します。位置指定の基準となる場所は、positionstatic以外の値が指定された祖先のブロック要素です。

まず初めに、絶対位置の基準がどこにあるのか確認しておきましょう。以下の例は、10pxの境界線と10pxの余白を持つ親要素に、絶対位置の指定を行った子要素を配置したものです。親要素の背景色は、background-clipプロパティの値にcontent-boxを指定しているため、パディング・エリアは背後の色が透けて見える状態になっています。

子要素の配置は、それぞれ4つの角から10pxの距離を取った場所です。これを見ると、絶対位置の基準はコンテンツ・エリアの縁ではなく、パディング・エリアの縁であることが分かります。つまり、bottomの値を0にすると、包含ブロックの下辺にあたるパディング・エリアの外縁、ボーダー・エリアの内縁に密着します。

サンプルは、resizeに対応しているブラウザであれば、右下のハンドルを掴んでボックスのサイズ変更が可能です。

表示確認
CSS
#samp_box {
	overflow: auto;
	width: 100%;
	height: 300px;
	padding: 20px;
	background-color: #eee;
	resize: both;
}
#samp_box > section {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 10px;
	border: 10px solid #000;
	background-color: #fff;
	background-clip: content-box;
}
section > div {
	position: absolute;
	width: 50px;
	background-color: #09f;
	color: #fff;
	text-align: center;
	line-height: 50px;
}
#item_1 {
	top: 10px;
	left: 10px;
}
#item_2 {
	top: 10px;
	right: 10px;
}
#item_3 {
	bottom: 10px;
	right: 10px;
}
#item_4 {
	bottom: 10px;
	left: 10px;
}
HTML
<div id="samp_box">
	<section>
		<div id="item_1">1</div>
		<div id="item_2">2</div>
		<div id="item_3">3</div>
		<div id="item_4">4</div>
	</section>
</div>

以上の内容を踏まえて、絶対位置指定によるbottomの挙動を見ていきます。位置指定の状態がabsoluteの場合、要素は通常のフローで配置された要素のレイアウトに影響を与えません。そのため、HTMLのマークアップの順序を気にすることなく、純粋に平面の移動距離によって配置を決定できます。

絶対位置指定で反対側の辺に要素を密着させたい場合は、無理にそのプロパティを使用せずに、対応するプロパティに変更しましょう。bottomであればtopです。bottom100%を指定すると、包含ブロックから完全にはみ出します。

表示確認
CSS
#samp_box {
	padding: 1rem;
	background-color: #eee;
}
#samp_box > section {
	overflow: auto;
	position: relative;
	width: 300px;
	height: 200px;
	margin: 0 auto;
	background-color: #fff;
}
section > p {
	margin: 1rem 0 0;
	padding: 0 .5rem;
	border-bottom: 1px solid #eee;
}
section > div {
	position: absolute;
	width: 50px;
	color: #fff;
	text-align: center;
	line-height: 50px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
}
#item_1 {
	bottom: 2rem;
	left: 2rem;
	background-color: #fc605b;
}
#item_2 {
	bottom: 50%;
	left: 50%;
	margin: 0 0 -25px -25px;
	background-color: #76fc5b;
}
#item_3 {
	top: 0;
	right: 0;
	background-color: #5b96fc;
}
HTML
<div id="samp_box">
	<section>
		<p>通常のフローで配置された段落。</p>
		<div id="item_1">1</div>
		<div id="item_2">2</div>
		<div id="item_3">3</div>
		<p>通常のフローで配置された段落。</p>
	</section>
</div>

positionの値がrelativeの場合

positionプロパティの値がrelativeの場合、bottomは自身が本来配置されるべき場所からの相対的な距離を表します。この機能によって要素が移動した場合でも、隣接する要素は元のレイアウトを維持します。

この機能は、ユーザーのアクションに対して何らかのフィードバックを与えたい時などに有効です。例えば、リンクされた要素をクリックした時に少しだけ位置を移動させることで、そのアクションが有効であることを明示できます。

表示確認
CSS
#samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
#samp_box > section {
	margin: 1rem 0 0;
	padding: 1rem;
	background-color: #fff;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 5px;
}
section label {
	display: block;
	background-color: #09f;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
input[type="radio"] {
	display: none;
}
section > div {
	text-align: center;
	line-height: 50px;
	border: 1px solid #333;
}
#target {
	position: relative;
	background-color: #f90;
	color: #fff;
}
#move_lt:checked ~ #target {
	top: -50%;
	left: -50%;
}
#move_t:checked ~ #target {
	top: -75%;
}
#move_rt:checked ~ #target {
	top: -50%;
	right: -50%;
}
#move_l:checked ~ #target {
	left: -75%;
}
#move_n:checked ~ #target {
	background-color: #999;
}
#move_r:checked ~ #target {
	right: -75%;
}
#move_lb:checked ~ #target {
	left: -50%;
	bottom: -50%;
}
#move_b:checked ~ #target {
	bottom: -75%;
}
#move_rb:checked ~ #target {
	right: -50%;
	bottom: -50%;
}
HTML
<div id="samp_box">
	<section id="controller">
		<label for="move_lt">左上</label>
		<label for="move_t">上</label>
		<label for="move_rt">右上</label>
		<label for="move_l">左</label>
		<label for="move_n">元位置</label>
		<label for="move_r">右</label>
		<label for="move_lb">左下</label>
		<label for="move_b">下</label>
		<label for="move_rb">右下</label>
	</section>
	<section id="item_box">
		<!--=== 切り替えスイッチ ====-->
		<input type="radio" name="s" id="move_lt">
		<input type="radio" name="s" id="move_t">
		<input type="radio" name="s" id="move_rt">
		<input type="radio" name="s" id="move_l">
		<input type="radio" name="s" id="move_n" checked>
		<input type="radio" name="s" id="move_r">
		<input type="radio" name="s" id="move_lb">
		<input type="radio" name="s" id="move_b">
		<input type="radio" name="s" id="move_rb">
		<!--/=== 切り替えスイッチ ====-->
		<div>static</div>
		<div>static</div>
		<div>static</div>
		<div>static</div>
		<div id="target">relative</div>
		<div>static</div>
		<div>static</div>
		<div>static</div>
		<div>static</div>
	</section>
</div>

位置指定された要素が重なる順序

位置指定された要素が重なる場合は、カスケードの優先順位が高い方が手前に表示されます。このように奥行きのある表現は、z軸によって座標を管理します。要素の重なる順序を変更したい場合は、z-indexを使用して下さい。

以下の内容は、ソースコード上で後に書かれた内容が手前に重なって見える状況を確認するものです。

表示確認
CSS
#samp_box {
	position: relative;
	height: 240px;
	padding: 5px;
	border: 1px solid #666;
}
div > div {
	position: absolute;
	min-width: 200px;
	height: 100px;
	padding: 5px;
	border: 1px solid #999;
}
#item1 {
	bottom: 30px;
	left: 30px;
	background-color: #ffcccc;
}
#item2 {
	bottom: 100px;
	left: 100px;
	background-color: #ccccff;
}
HTML
<div id="samp_box">
	samp_box
	<div id="item1">
		item1<br>
		・bottom:30px;<br>
		・left:30px;<br>
	</div>
	<div id="item2">
		item2<br>
		・bottom:100px;<br>
		・left:100px;<br>
	</div>
</div>

bottomに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
image-orientation 横向きや逆さまに撮影された写真を正しい向きに回転させる
image-rendering 画像を拡大縮小するアルゴリズムを設定する
left 位置指定で配置された要素の左辺からの距離を指定する
object-fit 画像や動画などの置換要素をボックスに収める方法を指定する
object-position ボックスの中に配置されるオブジェクトの位置を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap インライン要素に対して溢れる単語の折り返し方法を指定する
overflow-x 要素から水平方向にはみ出す内容の表示方法を指定する
overflow-y 要素から垂直方向にはみ出す内容の表示方法を指定する
position 要素の位置指定の種類を変更する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align インライン要素や表のセルに対して縦方向の揃える位置を指定する
visibility 要素の領域を残したまま表示・非表示を切り替える
z-index 要素の重なり順序を指定する