備忘録的プログラミングリファレンス

bottomプロパティ

 bottomプロパティは、エレメントの垂直位置を指定するプロパティです。下からが基準になります。 ただし、positionプロパティがstatic以外であることが必要で、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摘要
autodefault値。エレメントの初期配置
length数値による設定。px、pt、pcなどの単位を合わせる。
%親要素またはウィンドウの高さ全体の割合。
initial初期値に戻す。
inherit親要素(親エレメント)のプロパティを継承する。

備考(Remarks)

初期値(Default value)auto
継承(Inherited)no
変化(Animatable)yes

Example