bottom
Updated / Published
bottomプロパティは positionプロパティで位置指定されている要素のボックスの下辺を包含ブロックからどれだけ離すのかを指定します。同じ位置を指定するプロパティは他にも、上辺からの位置を指定する topプロパティ、左辺からの位置を指定する leftプロパティ、右辺からの位置を指定する rightプロパティがあります。
- 値
- 初期値
auto- 適用対象
- 位置指定されている要素
- 継承
- しない
- メディア
- visual
位置を指定する際の基点となる部分は、positionプロパティで指定された値によって異なります。詳細は以下の通りです。
position : static ;- "
top", "bottom", "left", "right" の位置を指定するプロパティの効果は無効であり（適用対象にならないため）、その要素が本来レンダリングされる通常通りの位置に配置される。 position : relative ;- その要素が本来レンダリングされる通常通りの位置に配置され、"
top", "bottom", "left", "right" の各プロパティで要素の配置されている元の位置からどれだけずらすかを指定する相対的な位置指定となる。これを相対配置と呼ぶ。 position : absolute ;- 包含ブロック（祖先要素のうち、もっとも近い祖先の要素にあたるブロックボックスを形成する要素の内容領域）の各辺を基準に配置され、"
top", "bottom", "left", "right" の各プロパティで包含ブロックの各辺からどれだけ離すのかを指定する絶対的な位置指定となる（祖先要素に位置指定されている要素がなければ、初期包含ブロックを基準とする）。これを絶対配置と呼ぶ。 position : fixed ;- "
absolute" に従って配置された後（つまり、位置指定の基点は "absolute" と同じ）、スクロール機構によって連続的にアクセス可能な連続メディアでは、表示域に対して固定され、スクロールしても動かないようにレンダリングされる。これを固定配置と呼ぶ。
"absolute" の説明を補足しておくと、たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは、html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。つまり、topプロパティ・leftプロパティはページの左上が原点に、bottomプロパティ・rightプロパティはページの右下が原点となります。そして、html要素に対して、widthプロパティ, heightプロパティを指定することで、初期包含ブロックの横幅・高さを指定することもできます。
bottomプロパティの値
bottomプロパティに指定できる値は、それぞれ以下の意味を示します。
- <長さ>
- "
em", "px" などの単位識別子を伴う数値で指定。 - <パーセンテージ>
- 包含ブロックの高さを基準とするパーセンテージ（
%）による割合で指定。 auto- "
auto" を指定した場合、上下の位置はtopプロパティの値によって決まる。topプロパティの値も "auto" の場合は、特に指定のない場合と同じ位置にレンダリングされる。その他、関係プロパティの値に依つて効果が異なるため、詳しくは内容領域の高さと垂直方向のマージンを計算する場合の auto と各プロパティの兼ね合いを参照。
なお、topプロパティと bottomプロパティの両方に "auto" 以外の値（長さ、またはパーセンテージ値）を指定した場合、topプロパティの値が優先され、bottomプロパティの値は無効となります。つまり、上下の位置を指定する分には topプロパティか bottomプロパティのどちらか一方を指定するだけで良いです。
bottomプロパティの実装状況
- IE
- ◯
- Firefox
- ◯
- Opera
- ◯
- Chrome
- ◯
- Safari
- ◯
- iOS
- ◯
- Android
- ◯
サンプル
<p><img src="map.gif" alt="日本と近隣諸国" /><br />
<a style="position : relative; left: 360px; bottom:330px;"
href="japan">日本</a><br />
<a style=" position : relative; right: -100px; top:-380px;"
href="south_korea">大韓民国</a><br />
<a style=" position : relative; right: -100px; bottom:530px;"
href="north_korea">北朝鮮</a><br />
<a style=" position : relative; left: 5px; bottom:700px;"
href="china">中華人民共和国</a></p>サンプルのように "top", "bottom", "left", "right" の各プロパティの長さとパーセンテージ値には正の値・負の値のどちらでも指定することができます。相対的な位置指定（"position : relative ;"）であれば、垂直方向の位置に "top : 5px ;" と指定しても "bottom : -5px ;" と指定してもどちらも同じ位置に計測されます。また、水平方向の位置に "left : -5px ;" と指定しても "right : 5px ;" と指定してもどちらも同じ位置に計測されます。