ボックスの位置 position
position
ボックスの位置を指定します。
position : relative ; /*元の位置が基準*/
position : absolute ; /*親ボックスが基準*/
top / bottom
left / right
で位置を指定します。
<div> /*グレー親ボックス*/
<div>1</div>
<div> /*赤ボックス*/
<div> /*黒ボックス*/
<div>2</div>
<div>3</div>
</div>
<div>4</div>
</div>
</div>
赤ボックスに position : relative ; を指定し（親ボックスになるように）
３ボックスに position : absolute ; top : 0 ; left : 100px ;
４ボックスに position : absolute ; top :0 ; right : 0 ; を指定します。
赤ボックスを基準に３ボックスは上から０左から100の位置に移動しました。
赤ボックスを基準に４ボックスは上から０右から０の位置に移動しました。
赤ボックスにposition:reative;を指定しましたが、それにtop:30px; left:0;を指定します。
元にある場所を基準に赤ボックスは、上から３０ひだりから０の位置に移動しました。
では、
赤ボックスに position : relative ;
３ボックスに position : absolute ; top : 0 ; left : 100px ;
４ボックスに position : absolute ; top :0 ; right : 0 ;
の状態に元に戻して・・・
赤ボックスの position : relative ; を指定しないとどうなるか見て見ましょう。
赤ボックスの親ボックス指定がなくなったので、親ボックスがグレーボックスになりグレーボックスを基準に上から０の位置に移動します。
relative で指定する場合は元々ある場所を基準に移動します。
absolute で指定する場合は親ボックス（画面）を基準に移動します。
親ボックス（画面）以外に親ボックスを指定する場合、親ボックスにするボックスに relative を指定します。
2カラムや3カラムを構成するのに、使われているスキンもあります。
関連記事