ホーム >>> HTML整理ノート

position:relative 相対配置

top／leftスタイルを使って、標準配置位置からの移動量を指定する。マイナス(-)指定も可。インライン要素も含め全ての要素に指定できる。
position指定のない他の要素は、標準配置の位置から動かないので、重なってしまう場合もある。

Sample

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

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

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

これは   表です

★下の例は
画像に＜position:relative;top:5mm;left:1cm＞、
二行目のP要素に＜position:relative;top:5mm;left:1cm＞、
span要素に＜position:relative;top:1.5em;left:2em＞、
表に＜position:relative;top:0.8cm;left:100px;＞を指定。

指定したtop／left分だけ、標準配置から移動している。

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

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

これは   表です

★下の例は、上の例のtop／leftの値をマイナス(-)にしたもの。

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

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

これは   表です

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>★下の例は･････</p>
<div style="width:400px;height:200px;border:1px solid navy">
　<p style="border:1px solid blue">この行には画像
　　<img src="../../images/bg/tairu1.gif" style="position:relative;top:10px;left:30px">
　　　　　を配置しました</p> 
　<p style="position:relative;top:5mm;left:1cm;border:1px solid blue">
　　この行には<span style="position:relative;top:1.5em;left:2em;border:1px solid red">
　　　　　SPAN要素</span>を配置しました<br>
　</p>
　<table border="1" style="position:relative;top:0.8cm;left:100px;">
    <tr>
      <td>これは</td>
      <td>表です</td>
    </tr>
　</table>
</div>

<p>★下の例は、上の例のtop／leftの値をマイナス(-)にしたもの。</p>
<div style="width:400px;height:200px;border:1px solid navy">
　<p style="border:1px solid blue">この行には画像
　　<img src="../../images/bg/tairu1.gif" style="position:relative;top:-10px;left:-30px">
　　　　　を配置しました</p> 
　<p style="position:relative;top:-5mm;left:-1cm;border:1px solid blue">
　　この行には<span style="position:relative;top:-1.5em;left:-2em;border:1px solid red">
　　　　　SPAN要素</span>を配置しました<br>
　</p>
　<table border="1" style="position:relative;top:-0.8cm;left:-100px;">
    <tr>
      <td>これは</td>
      <td>表です</td>
    </tr>
　</table>
</div>