top／bottom／left／right 位置指定

top／left／bottom／rightは、position:absoluteやposition:relativeで要素を配置する場合に使う。上左下右からの位置（距離）を指定する。必ず、配置方法を決めるpositionスタイルと一緒に設定しなければならない。position指定がない場合、top／left／bottom／rightは無効になる。

(値)
　数値+単位　･･･px,pt,em,cm,mmなど
　%　　　　　･･･親要素(コンテナ)の幅／高さに対する割合
　auto　　　･･･プラウザが自動調整する

Sample

これはtop／left／bottom／rightの概念図。全てtop／left／bottom／rightを使って配置した（position:absoluteで）。

親要素（コンテナ）

|
|　top
↓

↑
|　bottom
|

-- left -→

←- right --

子要素

Sample Source......................................................................>>>

<div style="position:absolute;top:380px;left:420px;
　　　　　　　width:400px;height:200px;border:3px solid navy">親要素（コンテナ）
　<p style="position:absolute;top:1px;left:170px;width:100px;padding-left:5mm">|<br>
　　　　　　|　<b>top</b><br>↓</p>
　<p style="position:absolute;bottom:1px;left:170px;width:100px;padding-left:5mm">↑<br>
　　　　　　|　<b>bottom</b><br>|</p>
　<p style="position:absolute;top:90px;left:2px;width:100px;padding-left:5mm">
　　　　　　-- <b>left</b> -→</p>
　<p style="position:absolute;top:90px;right:2px;width:100px;padding-left:5mm">
　　　　　　←- <b>right</b> --</p>
　<div style="position:absolute;top:55px;left:95px;
　　　　　　　　width:180px;height:80px;border:3px solid red">子要素
　</div>
</div>