■positionについて■
▲static▲
通常通りの位置に配置します。この値を指定するとtop,left,right,bottomのプロパティは適用されなくなる。
▲relative▲
相対的な配置です。このボックスが通常通りに表示された場合の位置から、指定した値だけを移動して配置します。このあとに
続くボックスはこのボックスが通常表示されているものとして配置される。position:relative;プロパティでstaticを指定した場合に表示される位置が基準位置となり、
top、bottom、left、rightは適用されます。
▲absolute▲
絶対的な配置です。このボックスの包含ブロックを基準としてそこからの距離で配置します。この値を指定すると他の要素の
配置には影響しない独立した配置となる。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、
親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、
ウィンドウ全体の左上が基準位置となります。（=必ず親ボックスにposition:relative;(親要素になんでもいいからpositionプロパテが必要)をつけておく必要がある。ないとウィンドウ基準となりぐちゃぐちゃになる）
▲fixed▲
通常はウィンドウの表示領域を基準としそこからの距離で配置します。
「absolute」を指定した場合と同様にほかの要素の配置には影響しない独立した配置となるほか
位置が固定されスクロールしてもうごかなくなる。
・ほかの要素と重なった場合はＺindexで重なり順を変更する。
・relativeとabsoliteは必ず併用する。
●例●
●absolute配置
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
・位置を変えたい要素（この場合img-2）の親ボックス（この場合div）にポジションプロパティを設定してあげます。
●relative配置
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}