positionとは
positionとは要素の表示位置を指定するものです。併せて要素の重なりも指定できます。スクロールしても固定して表示されるメニューを作成する場合などにも利用されます。
positionのプロパティ
position値 | 説明 |
static | 配置方法を指定しない。(初期値) top、bottom、left、rightは指定しても無視されます。 |
relative | 本来の表示位置を基準に配置する。 top、bottom、left、rightを指定して本来の表示位置から数pxずらして配置するといった使い方をします。 |
absolute | 親要素の表示位置を基準に配置する。 |
fixed | ブラウザの位置を基準に配置する。 スクロールしても固定して表示されるメニューやページトップへボタンに利用されます。 |
positionの利用例
~ relative ~
relativeを指定することで、本来の表示位置を基準にtop、bottom、left、rightを指定して数pxずらして配置するといった使い方が可能になります。
表示位置の調整に加え、要素を重ねて表示することもできます。初期値のstaticでは、どちらも指定できません。relativeだけでなく以下のabsolute、fixedの場合も、表示位置、重なりを指定できます。
重なりの順序はz-indexで指定します。
結果
HTML
CSS
-
AB
「B」にtop:10px;、left:-10px;を指定しているため「B」が本来表示される位置から上に10px、左に15pxずれて表示されています。
重なりの順序として「A」にz-index:10;「B」にz-index:20を指定しています。このためz-index値の大きい「B」が前面に表示されています。 -
/* HTMLの例 */
AB -
/* CSSの例 */ /* background-color、margin等、説明に不必要なプロパティは省略しています。*/ .sample0 { font-size:0; /* 子要素がinline-blockの場合に不要な余白を防ぐため */ } .sample1 { display:inline-block; /* 横並びにするため */ font-size:10px; /* 親要素でfont-size:0;を指定したため */ position:relative; z-index:20; } .sample2 { display:inline-block; /* 横並びにするため */ font-size:10px; /* 親要素でfont-size:0;を指定したため */ position:relative; z-index:10; top:10px; left:-10px; }
~ absolute ~
親要素の表示位置を基準にtop、bottom、left、rightを指定して数pxずらして配置するといった使い方が可能になります。relative同様、重なりを指定できます。
relativeとの違いはrelativeが、本来の表示位置を基準にするのに対して、absoluteは親要素の表示位置を基準にします。このため、同じtop:10px;と指定したとしても、表示される位置はrelative、absoluteで異なります。
結果
HTML
CSS
-
AB
上記のrelativeの例と同じく「B」にtop:10px;、left:-10px;を指定しているのですが全く表示される位置が異なります。
-
/* HTMLの例 */
AB -
/* CSSの例 */ /* background-color、margin等、説明に不必要なプロパティは省略しています。*/ .sample3 { } .sample4 { display:inline-block; /* 横並びにするため */ position:absolute; z-index:20; } .sample5 { display:inline-block; /* 横並びにするため */ position:absolute; z-index:10; top:10px; left:-10px; }
中央揃えにしたい場合、top、leftに50%等指定して調整します。ドロップダウンメニューでよく利用するテクニックです。
~ fixed ~
固定メニューを作成する場合に必ず利用するプロパティです。
結果
HTML
CSS
-
左下に表示中AB
-
/* HTMLの例 */
左下に表示中AB -
/* CSSの例 */ /* background-color、margin等、説明に不必要なプロパティは省略しています。*/ .sample3 { } .sample6 { position:fixed; bottom:100px; /* ブラウザ端からの座標 */ left:100px; /* ブラウザ端からの座標 */ } .sample7 { position:fixed; bottom:90x; /* ブラウザ端からの座標 */ left:150px; /* ブラウザ端からの座標 */ }