position:relativeはテーブルや画像などを重ねたりするのにものすごく便利な機能です。
position:absoluteは、サイトの絶対位置を指定するため、デザインをいじるたびに微調整が必要になることが多いですが、
position:relativeは、｢本来の表示位置から、どれだけずらして表示するか？」であるため、メンテにも強いです。
※SAMPLE
DIVで囲ったテーブルに5枚の画像を配置。relativeで配置してると、DIVテーブルがどこで表示されても、この配置は維持されます。
<div style="border:solid 1px #000000;width:150px;">
<img src="./img/crown-1.gif"/>
<img src="./img/crown-2.gif"/>
<img src="./img/crown-3.gif" style="position:relative;top:30px;"/>
<img src="./img/crown-4.gif"/>
<img src="./img/crown-5.gif"/>
</div>
●もし余白がなくしたい場合。
reltiveだと余白が生まれます。これを解消しつつ。DIVテーブルで囲まれた配置を維持したい場合は、以下のようにします。
DIVにrelative指定をして内部で移動させたい画像にabsoluteをかけます。
<div style="border:solid 1px #000000;width:150px;position:relative;">
<img src="./img/crown-1.gif"/>
<img src="./img/crown-2.gif"/>
<img src="./img/crown-3.gif" style="position:absolute;top:25px;"/>
<img src="./img/crown-4.gif"/>
<img src="./img/crown-5.gif"/>
</div>
absoluteは、スクリーンの左上を起点に指定しますが、親要素にstatic以外の指定がある場合、そこを基点に指定します。これでDIVテーブルがどこで表示されても、中の構成はずれることがなくなります。
ちなみにposition指定は、指定するだけでは、見た目に影響しません。left、topを指定して初めて画面に影響します。もちろんtopだけ指定した場合、leftは影響受けません。
