位置指定のtop／left

()内の数字は、HTMLｿｰｽの記述の順番。

(1)relative指定(position:relative;top:80;left:30)

(2)absolute指定(position:absolute;top:80;left:30)

(3)absolute指定(position:absolute;top:100;left:0)

(4)position指定無し

relativeは、position指定しない場合の通常配置からのオフセット量を示す。(1)では、通常配置の位置から下に80px、右に30px移動する。
(1)と(2)は、同じ"left:30"なのにleft位置が異なる。これは(1)の通常配置のleft位置は(4)と同じで、このleft位置から30pxｽﾞﾚる。それに対して(2)は<body>要素の左端((3)と同じ)を原点にして30pxｽﾞﾚる。
(4)は"top:80;left:30"を指定しているが、position:指定されていないので機能しない。

<body>
<p style="position:relative;top:80;left:30;border:thin solid green">
　　　　　　　　　(1)relative指定(position:relative;top:80;left:30)</p>
<p style="position:absolute;top:80;left:30;border:thin solid green">
　　　　　　　　　(2)absolute指定(position:absolute;top:80;left:30)</p>
<p style="position:absolute;top:100;left:0;border:thin solid green">
　　　　　　　　　(3)absolute指定(position:absolute;top:100;left:0)</p>
<p style="top:80;left:30;border:thin solid green">(4)position指定無し</p>

end(01/10/13)