bottom プロパティ
bottom プロパティは、エレメントの垂直位置を指定するプロパティです。下からが基準になります。
ただし、position プロパティが static 以外であることが必要で、position プロパティの値によって表示位置の基準が変わります。
詳しくは以下のbottom プロパティについて
を参照してください。
bottom: 100px;
ページ内 Index
bottom プロパティについて
bottom プロパティは、position プロパティが設定されたエレメントで機能します。
以下は、position プロパティと表示位置の変化についてです。
| positionの値 | 概要 |
|---|---|
| position:static; | bottom プロパティは反映されない。 |
| position:absolute; | 絶対位置の設定で、基準位置はウィンドウの下端。親エレメント（親要素）に positon:static; 以外が設定されていれば、親エレメントの下端。 |
| position:fixed; | 絶対位置の設定でスクロールに影響を受けない。ウィンドウ上の表示位置が固定される。基準位置はウィンドウの下端。 |
| position:relative; | 相対位置の設定で、基準位置はデフォルトで表示される位置。 |
| position:sticky; | スクロールに影響を受けるために、bottom プロパティは position:sticky; によって位置が固定された時の垂直配置。位置が固定されていない間はbottom プロパティは影響しない。 |
エレメント内の相対位置
親エレメントに対して配置を設定するには、親エレメントに対してposition:relative;を指定し、エレメントに対してはposition:absolute;を指定します。
この時にエレメントの大きさがデフォルトで100%でも自動で調整されます。エレメントの幅を指定し直す必要があるかもしれません。
/* 親エレメントへの指定 */
parent_element {
position: relative;
}
/* 調整したいエレメントへの指定 */
element {
position: absolute;
width: 100%;
bottom: 10px;
}
構文(Syntax)
CSS
bottom: auto | length | % | initial | inherit ;
DOM ( JavaScript )
String = object.style.bottom;
object.style.bottom = " auto | length | % | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| auto | default値。エレメントの初期配置 |
| length | 数値による設定。px、pt、pcなどの単位を合わせる。 |
| % | 親要素またはウィンドウの高さ全体の割合。 |
| initial | 初期値に戻す。 |
| inherit | 親要素（親エレメント）のプロパティを継承する。 |
備考（Remarks）
| 初期値（Default value） | auto |
| 継承（Inherited） | no |
| 変化（Animatable） | yes |
Example
bottomによる位置の例です。 親エレメントにposition:relative;、エレメントにposition:absolute;を指定し、親エレメントを表示位置の基準にしています。
関連プロパティ
関連するプロパティに以下があります。