position
ポジショニングの方法を指定する。
通常、
absoluteやrelativeを指定して配置を指定したり、
top
left
bottom
right
z-index
とセットで使い、
JavaScriptで値を変更して要素の位置を動的に変更させる時に使います。
書式
position:値
値には
static | 本来の位置 |
relative | 本来の位置からの相対位置 |
absolute | HTMLの左上又はrelativeの指定された親要素からの絶対位置 |
fixed | ウインドウの左上からの絶対位置 |
inherit | 継承 |
を指定。
absolute又はfixedが指定された要素は領域が確保されない。
fixedはブラウザ上の固定位置に表示させたい場合に便利だが、
バージョン7未満のIEが対応していない。
また、7以降のIEは、標準モードと互換モードというものがあり、
標準モードだとfixedが使えるが、互換モードだとIE6と同じで使えない。
IEのモードは、
HTMLの<!DOCTYPE>宣言で代わり、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
↑のような場合は標準モードとなるが、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
↑この様に記述すると互換モードになってしまい、fixedが無効になるので注意。
fixedに対応していないブラウザをfixedと同じ表示にすることはJavaScriptを使えばできなくもないが、困難。
IE6も結構なシェアがあると思うので、
fixedを使う場合は、非対応ブラウザでも閲覧可能な崩れ方をするように考慮した方がいい。