HTML/CSS、position:relativeの話
relativeの基準点はstatic（何も指定しないとき）の表示位置です。
使用例
<style>
i.note {
position: relative;
top: 10px;
font-size: small;
font-style: normal;
}
i.note:before {
content: "(";
display: inline;
}
i.note:after {
content: ")";
display: inline;
}
i.note b {
font-weight: medium;
}
i.note b:after {
content: ": ";
display: inline;
}
</style>
<p>ろーれんいぷさむ翻訳<i class="note"><b>訳者注</b>なんですと</i></p>
ろーれんいぷさむ翻訳訳者注なんですと
なお、<sup><sub>はフランス語のスーパースクリプト、サブスクリプト、数学、物理学など、
「上付、下付をやめると意味が変わるもの」に使うためのもので、
デザインとして上付き文字、下付き文字にする場合は、スタイルシートを使うことになります。
その方法がrelativeです。
これを応用すると、波形のデザインもできます。
<style>
p span{ position: relative;}
p span:nth-child(1) {top: 20px;}
p span:nth-child(2) {top: 10px;}
p span:nth-child(3) {top: 0px;}
p span:nth-child(4) {top: -10px;}
p span:nth-child(5) {top: -20px;}
p span:nth-child(6) {top: -20px;}
p span:nth-child(7) {top: -10px;}
p span:nth-child(8) {top: 0px;}
p span:nth-child(9) {top: 10px;}
p span:nth-child(10) {top: 20px;}
</style>
<p><span>あ</span><span>い</span><span>う</span><span>え</span><span>お</span><span>か</span><span>き</span><span>く</span><span>け</span><span>こ</span></p>
あいうえおかきくけこ
ブロック要素、<div>などに対して使う時のrelativeは、
広告バナーアニメーションや、ゲーム画面のコンテナ（プレイエリア）に使う時などが多いと思います。
position:absoluteは要素がドキュメントから切り離されます（ニュアンスとして）が、relativeでは切り離されません。
<div style="position: absolute;border:1px solid blue;">absoluteヘッダー</div>
<div>あいうえおかきくけこーーーabsoluteヘッダーに重なる</div>
<div style="position: relative;border:1px solid blue;">relativeヘッダー</div>
<div>あいうえおかきくけこーーーrelativeヘッダーに重ならない</div>
absoluteの基準点はbodyですが、
absolute/relativeの中にabsoluteを入れると、基準点は親要素になります。
<div style="position: relative;border:1px solid blue;height:60px;">
↑この要素の左上からtop:20px;left:30px;
<div style="position:absolute;border:1px solid red;top:20px;left:30px;">あいうえおかきくけこ</div>
</div>
内側がabsoluteになっていると、外側のheightが0になってしまいます（absoluteヘッダーの例参照）ので、heightを指定してあります。
widthが指定してありませんが、divのwidthの初期値はauto、つまり100%とほぼ同じになります。
