absolute配置のブロック要素

以下の赤枠線ブロックはどれも、スタイル{position:absolute;top:80;left:20}が設定されている。

Test1･･･単独のブロック要素（実際には、<body>要素をｺﾝﾃﾅとする子要素。絶対配置の基準は<body>に)　

Test2,Test3の親要素（ｺﾝﾃﾅ)
スタイル{position:absolute;top:120;left:50;height:200}が設定されている。
これも絶対配置の基準は<body>

Test2･･･Test3の親要素

Test3

絶対的位置指定のposition:absolute ・親要素(コンテナ)の左上が絶対位置の原点(0,0)になる。
・通常は<body>タグがコンテナになる（上のｻﾝﾌﾟﾙでは、Test1と緑色枠線ﾌﾞﾛｯｸ）。
・ブロック要素内のブロックは、上位ブロックがコンテナとなり、その左上を配置原点とする(上ｻﾝﾌﾟﾙでは、Test2のｺﾝﾃﾅは緑色枠線ﾌﾞﾛｯｸで、Test3のｺﾝﾃﾅはTest2)。

HTML Source......................................................................>>>

<STYLE TYPE="text/css">
<!--
	.test  {position:absolute;top:80;left:20;border:thin solid red}
-->
</STYLE>
</head>
<body>
<p class="test">Test1･･･単独のブロック要素</p>
<div style="position:absolute;top:120;left:50;height:200;
        border:thin solid green">Test2,Test3の親要素（ｺﾝﾃﾅ)
  <div class="test" style="height:110">Test2･･･Test3の親要素
    <p class="test">Test3</p>
  </div>
</div>

end(01/10/13)