<style type="text/css">
div.parent_relative {
top:5px;
left:50px;
position:relative;
background-color:silver; margin:0; padding:5px; width:430px;
}
div.chiled_relative {
position:relative;
top:10px;
left:-30px;
background-color:yellow; margin:0; padding:5px; width:430px;
}
</style>
<div class="parent_relative">
【親要素】position:relative を指定しています。
<div class="chiled_relative">
【子要素】position:relative を指定しています。<br>
top、left プロパティで位置指定しているため、親要素の左上端が基準位置となります。<br>
この例では、親要素の左上端から<br>
・下方向に10px（top:10px）、<br>
・左方向に30px（left:-30px）<br>
ずらした位置に配置されます。<br>
※この例のように親要素にテキスト部分がある場合は、テキスト部分の終わりが基準位置となります。
</div>
</div>