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

bottomプロパティ

 bottomプロパティは、エレメントを下からの垂直位置を設定するプロパティです。ただし、positionプロパティが必要で、positionプロパティの値によって表示位置に変化があります。

position:static;は、bottomプロパティが設定されてもエレメントの配置に影響しません。

position:absolute;は絶対位置の設定で、bottomプロパティによって垂直配置を設定できます。基準位置はウィンドウの最下端ですが、親要素にpositon:static;以外が設定されていれば親要素の最下端です。

position:fixed;は絶対位置の設定でスクロールに影響を受けません。bottomプロパティによって垂直配置を設定できます。基準位置はウィンドウの最下端です。

position:relative;は相対位置の設定で、bottomプロパティによって垂直配置を設定できます。基準位置は、position:static;で表示される位置です。

position:sticky;はスクロールに影響を受けるために、bottomプロパティはposition:sticky;によって位置が固定された時の垂直配置です。位置が固定されていない間はbottomプロパティは影響しません。

構文(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