構文

top : 位置;
left : 位置;
right : 位置;
bottom : 位置;

説明文

　「top」，「left」，「right」，「bottom」は要素の配置位置を指定する。「position」で「relative」や「absolute」，「fixed」が指定されている場合に配置位置の指定が有効になる。

　「top」は基準となる位置から下方向にどの程度離れているかを指定する。親要素のくくられた要素であれば，親要素の上部分からの距離になる。例えば，「top:10px;」と指定すれば，親要素の上部から10px下の位置から要素を表示する。同様に「letf」は右方向，「right」は左方向，「bottom」は上方向への距離を指定する。

　指定には以下のような単位が利用できる。

単位意味
inインチ（1インチ=25.4mm）
cmセンチ・メートル
mmミリ・メートル
ptポイント（72ポイント=1インチ）
pcパイカ（1パイカ=12ポイント）
pxディスプレイの表示に利用する画素（ピクセル）
em要素で指定されているフォントのサイズを基準とした倍数。例えば，12ptのサイズを指定している要素に2emを指定すると，倍の24ptとなる
ex要素で指定されている小文字フォントのサイズを基準とした倍数
%親要素を基準とした割合
[画像のクリックで拡大表示]

使用例

● CSSの定義

div { position : absolute;
      top : 50px;
      left : 80px;
      background-color : #d0d0ff;
      width : 200px;
      height : 150px;
      padding : 5px;
}

● HTMLの例

<div>
<h3>オブジェクトの配置</h3>
<p>CSSの「top」や「left」などで，所定の位置にオブジェクトを配置することが
可能です。</p>
</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目