top

Updated / Published

topプロパティは positionプロパティで位置指定されている要素のボックスの上辺を包含ブロックからどれだけ離すのかを指定します。同じ位置を指定するプロパティは他にも、下辺からの位置を指定する bottomプロパティ、左辺からの位置を指定する 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プロパティを指定することで、初期包含ブロックの横幅・高さを指定することもできます。

topプロパティの値

topプロパティに指定できる値は、それぞれ以下の意味を示します。

<長さ>
"em", "px" などの単位識別子を伴う数値で指定。
<パーセンテージ>
包含ブロックの高さを基準とするパーセンテージ（%）による割合で指定。
auto
"auto" を指定した場合、上下の位置は bottomプロパティの値によって決まる。bottomプロパティの値も "auto" の場合は、特に指定のない場合と同じ位置にレンダリングされる。その他、関係プロパティの値に依つて効果が異なるため、詳しくは内容領域の高さと垂直方向のマージンを計算する場合の auto と各プロパティの兼ね合いを参照。

なお、topプロパティと bottomプロパティの両方に "auto" 以外の値（長さ、またはパーセンテージ値）を指定した場合、topプロパティの値が優先され、bottomプロパティの値は無効となります。つまり、上下の位置を指定する分には topプロパティか bottomプロパティのどちらか一方を指定するだけで良いです。

topプロパティの実装状況

IE
◯
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

サンプル

<div style="position:relative; width:10em; height:7em; margin:0 auto;">
<div style="width:5em; height:1em; background:black; position:absolute; top:0; left:0;"></div>
<div style="width:5em; position:absolute; top:2em; left:0; text-align:center;">◯</div>
<div style="width:5em; height:1em; background:black; position:absolute; top:0; left:6em;"></div>
<div style="width:5em; position:absolute; top:2em; left:6em; text-align:center;">◯</div>
<div style="position:absolute; top:3.5em; left:5em; text-align:center;">▲</div>
<div style="width:5em; height:1em; background:black; position:absolute; bottom:0; left:3em;"></div>
</div>

この機能を使えば、要素を好きな位置に配置して、要素同士を重ね合わせることも可能です。重なった要素同士の順番（前面に表示させるかなど）はz-indexプロパティで制御できます。