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