CSS positionについて

CSS on ,

CSSレイアウトでサイト作成をしていても意外と使わないのがこのpositionプロパティ。
いざ使うときになって、あれどうやるんだったけ?という事があります。
と言うわけで、忘れないようにもう一度おさらい。

■positionプロパティの値と種類

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

relative(相関
相対位置への配置となります。
positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
この値のときには、top、bottom、left、rightは適用されます。

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

fixed(固定)
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
また、IE6には対応出来ていないようです。
これもあまり使ったことないですね。

一般的には下記の様な形が一番使用するかなと思います。

#oya {
position:relative; ← 親ボックスにする指定
}

#ko {
position:absolute; ←親ボックスに対しての絶対位置指定
top:100px; ← 親ボックスからのtopの距離
right:50px; ← 親ボックスからのrightの距離
}

とても簡単ですよね!
でも、これにmargin やpadding、floatなどのプロパティが加わったり、
ブラウザ毎によるバグが作用するので、なかなか思い通りにいきません。

う~ん、奥が深い。

コメントを残す