positionプロパティ

・positionプロパティ

指定した要素の配置方法を指定するためのプロパティ。

:static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。

:relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。

:absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

:fixed 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。実際にはブラウザのサポートが遅れているようです。

例）

①まずは動かしたい範囲（wrapper内等に）にposition:relative;を設定する。
（wrapper部分がposition:relative;になっているので基準がwrapperになる。）

②動かしたい要素にposition:absolute;を指定。

③動かしたい要素の位置指定。（wrapper内が基準なので初期値はwrapper内の左上）

position:absolute;
top: -20px;
left: 100px;