Style bottom 属性

定義と使用法

bottom 属性設定または位置要素の底部位置を返します。

ヒント：位置要素とは、position 属性が relative、absolute、または fixed に設定された要素を指します。

ヒント：位置要素の上部位置を設定または返すには、top 属性を使用してください。

も参照してください：

CSS 説明書：CSS 位置

CSS 参考マニュアル：bottom 属性

例

例 1

<button>要素の底部位置を設定：

document.getElementById("myBtn").style.bottom = "100px";

実際に試してみる

例 2

<div>要素の底部位置を設定：

document.getElementById("myDiv").style.bottom = "10px";

実際に試してみる

例 3

負値を使用して - <div>要素の底部位置を設定：

document.getElementById("myDiv").style.bottom = "-100px";

実際に試してみる

例 4

<div>要素の底部位置を返します：

alert(document.getElementById("myDiv").style.bottom);

実際に試してみる

文法

bottom 属性を返す：

object.style.bottom

bottom 属性を設定：

object.style.bottom = "auto|length|%|initial|inherit"

属性値

値 説明
auto ブラウザが底部位置を設定します。デフォルト。
length 長さ単位で底部位置を定義します。負値も許可されます。
% 親要素の高さのパーセントで底部位置を設定します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

技術的詳細

デフォルト値： auto
返り値： 文字列，位置要素の底部位置を示す。
CSS バージョン： CSS2

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート