【CSS】positionの「absolute」「relative」「fixed」の本当の意味

この間初めて知ったのでメモしときます。

参考になれば使ってください。

• static

初期設定がこれ。特に配置方法が指定されないので、ブラウザごとの配置方法に依存する。

※ この値のときには、top、bottom、left、rightは適用されない。

• absolute

一番近い、static以外が指定されている親ボックスの左上を「top : 0px, left : 0px」として配置を指定する。

※ 該当の親ボックスがなければ、windowの左上が0px, 0pxとなる。

• relative

相対位置への配置。つまりstaticでブラウザによしなに置かれた位置(staticでの位置)を「top : 0px, left : 0px」として配置する。

• fixed

absoluteと同じで、スクロールしても位置がwindowに固定されたままになります。

fixedで注意したいのが「windowに固定されたまま」という点です。

他の値(static,absolute,relative)はdocument上で固定なのに対し、fixedはwindow上(ブラウザ表示領域上)で固定という点に気をつけてください。