position:relative	←　相対な位置を示す
top:距離	←　上からの距離
bottom:距離	←　下からの距離
left:距離	←　左からの距離
right:距離	←　右からの距離

---

距離：

単位つきの数値

%

「position:relative」プロパティと、距離をあらわすプロパティを組み合わせて相対的な位置に表示させます。
距離をあらわすプロパティは、top，bottom，left，rightプロパティがあります。
これらは親要素のボックスを基準にした絶対位置に表示されるため、通常の配置とは別扱いとなります。

このプロパティは文字や画像を重ねて表示させたいときなどには便利ですが、サイトに訪れる人の解像度を考慮していないページ作りをしてしまうと大変見づらいページになってしまいます。

単位をつけた数値を使って親要素を基準にした位置を指定します。
単位の詳しいことは、『単位の指定方法』を御覧ください。
　・　{ position:relative; top:1em; left:5em; }
　・　{ position:relative; bottom:10px; right:50px; }

%を使って親要素を基準にした位置を指定します。
　・　{ position:relative; top:10% left:30%; }
　・　{ position:relative; bottom:10% right:30%; }

positionプロパティには、絶対位置で配置する「position:absolute」と、相対位置で配置する「position:relative」があります。

絶対位置で指定「position:absolute」 親ボックスの左上を基準として、そこから指定された距離に配置します。 相対位置で指定「position:relative」 設定を始めた位置を基準として、そこから指定された距離に配置します。

別窓にサンプルを表示します(単位つきの数値で指定した場合)

　　

<STYLE type="text/css">
<!--
P {
background-color:#ffffff;
border-color:#3399ff;
border-style:dotted;
border-width:1px;
width:200px;
height:100px;
padding:0.5em;
}
.case1 { position:relative; top:100px; left:250px; }
-->
</STYLE>

<P class="case1">上から100px<BR>左から250px<BR>を指定しています。</P>

別窓にサンプルを表示します(%で指定した場合)

　　

<STYLE type="text/css">
<!--
P {
background-color:#ffffff;
border-color:#3399ff;
border-style:dotted;
border-width:1px;
width:200px;
height:100px;
padding:0.5em;
}
.case1 { position:relative; bottom:-10%; right:30%; }
-->
</STYLE>

<P class="case1">下から-10%<BR>右から30%<BR>を指定しています。</P>