position:relativeのﾌﾞﾛｯｸ要素のleft配置

position指定無し

(relative;left:50)指定

(relative;left:30)指定

親要素（ｺﾝﾃﾅ)･･･position指定無し

(relative;left:50)指定

(relative;left:30)指定

親要素（ｺﾝﾃﾅ)･･･(relative;left:50)指定

(relative;left:50)指定

(relative;left:30)指定

(結果)relative配置のﾌﾞﾛｯｸ要素のleft配置は * left位置は、親要素("ｺﾝﾃﾅ"ともいう）の左端を基準にしたleft指定になる。
* ｺﾝﾃﾅは通常は<body>ﾀｸﾞだが、上の赤枠線のようにﾌﾞﾛｯｸ要素内にﾌﾞﾛｯｸ要素を配置する場合もある。この場合上位ﾌﾞﾛｯｸがｺﾝﾃﾅとなり、その左端がleft配置の基準になる。

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

<style TYPE="text/css"><!--
  p.test  {border:thin solid green}
  div     {border:thin solid red}
--></style>
</head>
<body>
<p class="test">position指定無し</p>
<p class="test" style="position:relative;left:50">(relative;left:50)指定</p>
<p class="test" style="position:relative;left:30">(relative;left:30)指定</p>
<div>親要素（ｺﾝﾃﾅ)･･･position指定無し
<p class="test" style="position:relative;left:50">(relative;left:50)指定</p>
<p class="test" style="position:relative;left:30">(relative;left:30)指定</p>
</div>
<p></p>
<div style="position:relative;left:50">親要素（ｺﾝﾃﾅ)･･･(relative;left:50)指定
<p class="test" style="position:relative;left:50">(relative;left:50)指定</p>
<p class="test" style="position:relative;left:30">(relative;left:30)指定</p>
</div>

end(01/10/12)