CSSで、表示位置の決め方を指定するpositionプロパティに関する解説です。
positionプロパティは、表示位置の決め方を指定するプロパティです。
positionプロパティの書式は、以下のようになります。
position: 値値としては、以下のものが取れます。
inheritstaticrelative通常の表示位置からtopプロパティ, leftプロパティ, bottomプロパティ及びrightプロパティで指定された分だけずれて表示されます。
但し、当該要素は通常の表示位置で表示されたものと見なして、後続の要素を配置します。
absoluteコンテナブロックの上下左右端を基準とした位置に絶対配置します。
コンテナブロックとは、当該要素の上位要素で、一番近いstatic値以外の値のpositionプロパティを指定された要素ブロックです。
つまり、上位要素で static値 以外のpositionプロパティを与えられた要素があれば、最も自分に近い階層の要素の上下左右端を基準とした位置指定となりますし、そうでなければページの上下左右端を基準とした配置となる事になります。
原点からの位置は、topプロパティ, leftプロパティ, bottomプロパティ及びrightプロパティで指定します。
また、後続要素を始めとする他の要素は当該要素が存在していないかのように配置されます。
fixed表示メディア(ディスプレイや印刷用紙など)上の、topプロパティ, leftプロパティ, bottomプロパティ及びrightプロパティで指定された位置に表示されます。
位置は表示メディア上の位置なので、PCのディスプレイなどのスクリーンメディアの場合、スクロールしても動きません。
後続要素を始めとする他の要素は当該要素が当該要素が存在していないかのように配置されます。
例えば、LOGOと言うIDを与えられた任意の要素を、画面の左上端に表示したい(但し固定しない)場合は、
#LOGO {position: absolute;top: 0;left: 0;}
と記述します。
ネットスケープ 4.xでは、以下の点に注意して下さい。
インターネットエクスプローラ 6.xまで、fixed値は実装されておりません。
WAP 2.0では、positionプロパティは定義されておりません。
fixed値を利用すると、スクロールが重くなる事が多いようです。
