CSS bottom

CSSのbottomプロパティを使うと、要素の位置を下からの距離で指定することができます。position プロパティと組み合わせて使用します。この記事を見れば、bottomプロパティの使い方が理解できます。

書式

bottom : auto

bottom : length

bottom : percentage

属性値

CSS の bottom プロパティには、以下に示すいずれかの値を指定できる。

auto

ユーザーエージェントが自動的に位置を決定する。

bottom: auto;

length

下からの位置を絶対値で指定する。以下に示す単位を利用できる。

単位

単位	意味	説明
em		フォントサイズ
rem	root em	ドキュメントのルート要素のフォントサイズ
cm	centimeters	1cm
mm	millimeters	1mm
Q	級 (quarter-millimeters)	0.25mm
in	inches	1 inch
pc	picas	1/6 inch
pt	points	1/72 inch
px	pixels	1/96 inch
vw	viewport width	ビューポートの幅の1/100
vmin	minimum viewport	ビューポートの幅または高さで小さい方の1/100
vmax	maximum viewport	ビューポートの幅または高さで大きい方の1/100

bottom: 1rem;

percentage

下からの位置を親要素に対するパーセンテージで指定する。

bottom: 50%;

初期値

auto

継承

しない

position プロパティ

CSS の bottom プロパティは、position プロパティと組み合わせて使用する。position プロパティの値によって基準となる位置が決まり、bottom プロパティは基準地点からの位置を指定する。position プロパティには以下に示す値を指定できる。

position: absolute

position プロパティに absolute を指定した場合、bottom プロパティで指定する位置は、HTML文書全体のレイアウトにおける絶対位置を示す。例えば、bottom: 0 の場合、HTML文書の最下部に表示される。

表示位置をページの最下部に固定する例を以下に示す。

<div style="position: absolute; bottom: 2px; right: 2px; background-color: aquamarine">
  このメッセージはページ最下部に表示されます。
</div>

position: fixed

position プロパティに fixed を指定した場合、bottom プロパティで指定する位置は、表示領域のレイアウトにおける固定位置を示す。例えば、bottom: 0 の場合、表示領域の最下部に表示される。表示領域を上へスクロールしても、常に表示領域の最下部に表示される。

表示位置を表示領域の最下部に固定する例を以下に示す。

<div style="position: fixed; bottom: 2px; background-color: aquamarine; z-index: 1">
  このメッセージは画面最下部に固定されます。
</div>

position: relative

position プロパティに relative を指定した場合、bottom プロパティで指定する位置は、現在の位置からの相対位置を示す。

次にbottomスタイルシート属性を使用したHTMLの例を示します。

通常位置から<span style="position: relative; bottom: 0.5em">0.5文字分上げる。</span>

通常位置から0.5文字分上げる。

position: static

position プロパティに static を指定した場合、bottom プロパティの指定は効かない。

関連記事

CSS の position プロパティ

参考文献

The World Wide Web Consortium (2022) CSS Positioned Layout Module Level 3