1010 [CSS] position: absolute? rekative? fixed?

position指定のおさらい。

！divで四角を作った場合、IE対策としてwidthだけでなくheightもきちんと指定すること

relative

指定する要素が本来ある場所からx軸、y軸方面にいかに動かすかを指定する。
現在の場所に対しての指定なので直感的に分かりやすいかも。

動かしたい要素に対して
position: relative;
top: ○○px;
left: ○○px;
てな感じで指定する。

absolute

基準点が必要となり、その基準点からの位置に動かすことができる。
基準点は、移動させたい要素の親要素に指定する。
が、そこにも指定が無い場合更なる親要素へと解釈を求め、最終的にはbodyが基準点となる。
つまり#container直下の#contentを移動したい場合、

#container{
 position: relative; /* relative指示をした親要素が基準点になる */
}
#content{
 position: absolute;
 top: ○○px;
 left: ○○px;
}

と指示する事で、#contentの左上端を、#containerの左上端の点からx軸方向に○○px、y軸方向に○○px移動する事が出来る。

fixed

bodyを基準点として、指定した場所に配置、その後スクロールしてもその位置で固定されたまま表示される。
ナビゲーション等に使える！

#box{
 position: fixed;
 top: ○○px;
 left: ○○px;
}
こんな感じで指示すると、スクロールしても消えない要素を表示できる