ボックスの配置場所を決めるには

position,top,left,right,bottom　CSSプロパティ

配置の仕方

先ず配置方法を指定します

position: static;

配置位置を特に指定しないので、親ボックス位置に留まります。

static

top～bottomは無視されます。設定しない場合（初期値）と同じです。

配置が可能になったら次に位置を指定します

position: relative;
top: 2em;
left: 5em;

relativeを先ず指定することで、親ボックスの基準位置からの相対位置に配置されるようになり、top～bottomの設定が反映するようになります。

relative

距離は単位付き長さで指定します。左上端を基準にしてその長さ分、離れた位置に表示します。値が表示するボックスに比べて大きい場合、ボックスからはみ出して表示します。

position: absolute;
bottom: 3em;
right: 5em;

親ボックス（絶体位置）に配置されるようになります。

absolute

親ボックスから出た場合でも、親ボックスは保持されますが、内容は失われます。paddingの設定がなければ、表示されません。

position: fixed;
top: 3em;
left: 5em;

親の親ボックス（絶体位置）に配置され、位置が固定されます。それ以外はabsoluteと同じです。

fixed

初期値・適用する対象・値の継承

初期値　static　親のボックスの中に配置されます。top～bottom　の指定は利きません。

対象　　全ての要素　

継承　　する