position:absolute 絶対配置

position:absolute 絶対配置は親要素（コンテナ）を基準に配置される。コンテナのtop／bottm／left／rightからの距離を数値指定する。マイナス(-)指定も可。
親要素（コンテナ）を移動すると、その中の子要素も自動的に移動する。
数値で自由に配置できるので、要素が重なってしまうこともある。この場合、後に記述（配置）された要素ほど上に表示される（z-indexプロパティで変更可）。

Sample

★下は、position指定無しの標準の配置

この行には画像を配置しました

この行にはSPAN要素を配置しました

これは

表です

★下の例は＜position:absolute＞･････（数値指定はSource参照）

この行には画像を配置しました

この行にはSPAN要素を配置しました

これは

表です

★下の例は3層のコンテナ階層。3層目には、3枚の画像を位置決めしながら重ねて配置。

親(第一層)

中親(第二層)

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

<p>★下は、position指定無しの標準の配置</p>
<div style="width:400px;height:200px;border:1px solid navy">
　<p style="border:1px solid blue">この行には
　　　　画像<img src="../../images/bg/tairu1.gif">を配置しました</p> 
　<p style="border:1px solid blue">この行には
　　　　<span style="border:1px solid red">SPAN要素</span>を配置しました</p>
　<table border="1">
    <tr>
      <td>これは</td>
      <td>表です</td>
    </tr>
　</table>
</div>

<p class="kaisetu">★下の例は＜position:absolute＞･････（数値指定はSource参照）</p>
<div style="position:absolute;top:550px;left:450px
　　　　　　　　　　　;width:400px;height:200px;border:1px solid red">
　<p style="border:1px solid blue">この行には画像
　　<img src="../../images/bg/tairu1.gif" style="position:absolute;top:4mm;left:25mm">
　　　　を配置しました</p> 
　<p style="position:absolute;top:3cm;left:1cm;border:1px solid blue">この行には
　　<span style="position:absolute;top:1.5em;left:1e;border:1px solid red">SPAN要素</span>
　　　　を配置しました</p>
　<table border="1" style="position:absolute;top:4cm;left:7cm;">
    <tr>
      <td>これは</td>
      <td>表です</td>
    </tr>
　</table>
</div>

<p class="kaisetu">★下の例は3層のコンテナ階層。</p>
<div style="position:absolute;top:780px;left:420px
　　　　　　　　　　　;width:400px;height:200px;border:1px solid blue">親(第一層)
　<div style="position:absolute;bottom:0;left:3px
　　　　　　　　　　　;width:300px;height:150px;border:1px solid red">中親(第二層)
　　<div style="position:absolute;top:4px;right:0
　　　　　　　　　　　;width:200px;height:100px;border:1px solid navy">
　　　　<img src="../../images/bg/tairu1.gif"
　　　　　　　　　 style="position:absolute;bottom:0;right:0">
　　　　<img src="../../images/cut/umeuguisu.gif"
　　　　　　　　　style="position:absolute;top:-14px;left:40px">
　　　　<img src="../../images/anime/16.gif" style="position:absolute;bottom:0;left:25mm">
　　</div>
　</div>
</div>