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

（以下の緑色枠線は全て<p>ﾀｸﾞによるﾌﾞﾛｯｸ要素です）

position指定無し

(relative;top:20)指定･･･直前の要素から、通常の1行分＋20pxだけ間隔があきました。

position指定無し･･･通常に配置される位置そのままです。

(relative;top:-20)指定･･･上の要素から、通常の1行分-20pxだけ間隔があきました(狭まりました）。

親要素（ｺﾝﾃﾅ)･･･以下は全てposition指定無しの通常配置

position指定無し

position指定無し

position指定無し

親要素（ｺﾝﾃﾅ)

position指定無し･･･通常位置のまま

(relative;top:20)指定･･･通常位置より20px下に

position指定無し･･･通常位置のまま

(relative;top:10)指定･･通常位置より10px下に

position指定無し･･･通常位置のまま

(relative;top:-20)指定･･･通常位置より-20px下に(20px上に)

(結果)relative配置のﾌﾞﾛｯｸ要素のtop配置は * relative配置のtopとは、position指定無しの通常位置からのオフセット量を示す。

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;top:20">
　　　　(relative;top:20)指定･･･直前の要素から、通常の1行分＋20pxだけ間隔があきました。</p>
<p class="test">position指定無し･･･通常に配置される位置そのままです。</p>
<p class="test" style="position:relative;top:-20">
　　　(relative;top:-20)指定･･･上の要素から、通常の1行分-20pxだけ間隔があきました(狭まりました）。</p>
<div>親要素（ｺﾝﾃﾅ)･･･以下は全てposition指定無しの通常配置 
  <p class="test">position指定無し</p>
  <p class="test">position指定無し</p>
  <p class="test">position指定無し</p>
</div>
<div style="position:relative;top:10">親要素（ｺﾝﾃﾅ)
  <p class="test">position指定無し･･･通常位置のまま</p>
  <p class="test" style="position:relative;top:20">(relative;top:20)指定･･･通常位置より20px下に</p>
  <p class="test">position指定無し･･･通常位置のまま</p>
  <p class="test" style="position:relative;top:10">(relative;top:10)指定･･通常位置より10px下に</p>
  <p class="test">position指定無し･･･通常位置のまま</p>
  <p class="test" style="position:relative;top:-20">(relative;top:-20)指定･･･通常位置より-20px下に(20px上に)</p>
</div>

end(01/10/12)