positionプロパティについて

f:id:ooigawa-bitter-sweet:20181020141304j:plain

cssでレイアウトをしていく際にpositionプロパティを使う機会は多いので、「static」「relative」「absolute」「fixed」の使い方についてをまとめておきます。

1. positionプロパティとは
2. 使い方、用途は？
3. 移動させたい要素に｢ position : static ; ｣を指定した場合
4. 移動させたい要素に｢ position : relative ; ｣を指定した場合
5. 移動させたい要素に｢ position : absolute ; ｣を指定した場合
6. 移動させたい要素に｢ position : fixed ; ｣を指定した場合
7. 【補足】z-index プロパティについて

1. positionプロパティとは

positionプロパティは、ボックスや要素の配置方法を指定することができるプロパティで、以下の4つの値がある。

● static ( 通常配置 )
● relative ( 相対配置 )
● absolute ( 絶対配置 )
● fixed ( 固定配置 )

positionプロパティを使って配置するための基点となる位置を指定し、「top」「bottom」「left」「right」の各プロパティを使って基点からの距離を指定する。

基点となる親ボックスの作り方は、htmlで親要素に＜div＞をつけ、その＜div＞に対して、スタイルでrelative、absolute、fixedのいずれかを指定すればOK。

2. 使い方、用途は？

「positionプロパティ」の使い方、用途としては、以下のような場合が挙げられます。

htmlの構造を無視して、自由にレイアウトや配置ができる

例えばヘッダー部分のサブメニューやパンくずなどは、レイアウト的には上の方に置きたいけど内容の重要度は低いからhtml上では下の方に置きたい。

そういった時に「position:absolute;」を指定することで、htmlでは下部に書きつつ、レイアウトは自由自在に配置するといったことができる。

ヘッダーのナビゲーション、サイドバーなどを固定表示させることができる

ヘッダーのナビゲーションやサイドバーなどを固定表示したい場合には、対象とする要素に「position:fixed;」を指定すればOK。

「float」プロパティを使う場合と違い、画像を簡単に追加することができる

例えば、新たに画像などを追加しようという時にfloatプロパティを使うと関連する要素のスタイルを変更したり色々と調整をする必要があるけど、positionプロパティを使うことでそういった手間がなくなるので、作業をする上では大きなメリットになる。

3. 移動させたい要素に｢ position : static ; ｣を指定した場合

｢ position : static ; ｣は、「通常配置」する際に使う値とされているので、移動させたい要素に｢ position : static ; ｣を指定しても画面表示上何の変化も起きない。実際、使う場面はほとんどないと思います。

【 html 】

＜div style=”position: relative; “＞

＜p＞サンプルテキスト＜/p＞

＜div style=”position: static; top: 20px; left: 100px; width: 100px; height:100px;

background-color: #769BB9; “＞

＜span style=”width:100px; height:100px;”＞＜p＞子供ボックス＜/p＞＜/span＞

＜/div＞

親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス内のテキスト親ボックス

子供ボックス

4. 移動させたい要素に｢ position : relative ; ｣を指定した場合

移動させたい要素に｢ position : relative ; ｣を指定すると、要素を相対的な位置に配置することができる。

この際、親ボックスを指定した場合と、指定していない場合のブラウザ表示の状態を見てみます。

親ボックスを指定した場合

親要素を指定した場合は(階層が上にある大きな親要素だろうが、階層が低い小さな親要素だろうが同じ)、親要素の中にある子要素の直下が基点になる。

実際、｢ position : relative ; ｣をつけた子供ボックスを｢ position : relative ; ｣をつけた親ボックス内に入れて配置位置を指定した場合のコードとそれをブラウザ表示させたものが以下です。

【 html 】

＜div style=”position: relative; “＞

＜p＞サンプルテキスト＜/p＞

＜div style=”position: relative; top: 20px; left: 100px; width: 100px; height:100px;

background-color: #769BB9; “＞

＜span style=”width:100px; height:100px;”＞＜p＞子供ボックス＜/p＞＜/span＞

＜/div＞

子供ボックス

親要素の中にある子要素の直下が基点になって配置されているのがわかります。
親要素内にあるテキストや画像など様々な要素に影響されて、相対配置されます。

POINT

親ボックスに｢ position : relative ; ｣をつけた場合、基点となる位置は子要素の直下。

親要素を指定していない場合

親要素を指定していない場合も同様に、直前にある要素、つまり本来の自分の位置が基点になり、そこから距離の指定をしていきます。

つまり、移動させたい要素に｢ position : relative ; ｣を使う際は、親要素を設定していようがしていまいが、親要素内にある子要素の存在は無視できないということ。テキストや画像などの要素の上に重ねて配置するといったことはできない。

以下が実際に表示した状態で、親ボックスを作って、それに｢ position : relative ; ｣をつけた時の表示と全く同じになる。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

子供ボックス

POINT

親要素を指定していない場合、基点となる位置は子要素の直下。

5. 移動させたい要素に｢ position : absolute ; ｣を指定した場合

｢ position : absolute ; ｣を指定すると要素を絶対的な位置で配置することができる。絶対的な位置とは、配置を画面上の好きな位置に完全指定できるということ。

親ボックスを指定した場合と、指定していない場合のブラウザ表示の状態をみてみます。

親ボックスを指定した場合

親ボックスを指定した場合は、親以外の影響を一切受けない配置ができる。(下図参照)

｢ position : relative ; ｣と違う点は、｢ position : absolute ; ｣の場合、親要素の中にいる子要素の影響も受けない、まさに親のみにしか影響されないということ。

だから、親要素を指定した場合は、その中にあるあらゆるテキストや画像など、親要素の中にいる子要素の存在を一切無視して、親ボックスの＜div＞を基点にした距離を「top」「bottom」「left」「right」の値で表すということになる。

ソースとブラウザ表示は以下。

【 html 】

＜div style=”position: relative; “＞

＜p＞サンプルテキスト＜/p＞

＜div style=”position: absolute; top: 20px; left: 100px; width: 100px; height:100px;

background-color: #769BB9; “＞

＜span style=”width:100px; height:100px;”＞＜p＞子供ボックス＜/p＞＜/span＞

＜/div＞

子供ボックス

親要素の中にあるテキストの存在を無視して、配置されている。
親要素内にあるテキストや画像など様々な要素に影響されず、絶対配置による指定ができる。

POINT

親ボックスに｢ position : relative ; ｣をつけた場合、基点となる位置は親ボックスの左上。

なお、要素を移動させたあとの部分は何もない状態なので後続にある要素によって詰められます。

あと注意点としては、基準となる親要素内のコンテンツの内容やテキスト量などを変更した時は、レイアウトに影響がないかしっかり確認するということ。

親要素を指定していない場合

基点となる親ボックスを指定しなければ「ブラウザウィンドウ」全体の左上が基点として自動的に指定される。

POINT

親要素を指定していない場合、基点となる位置はブラウザ全体の左上

6. 移動させたい要素に｢ position : fixed ; ｣を指定した場合

｢ position : fixed ; ｣は、要素を絶対位置に配置し、それを常に固定させておくことができる指定。絶対位置に配置するという部分は、｢ position : absolute ; ｣と同じ。

｢ position : fixed ; ｣で指定した要素は、画面をスクロールさせても、その影響を受けずに配置位置を固定させておくことができる。

親要素を指定してもしなくても、基点となる位置はブラウザ全体の左上になる。

ここでは以下の値で指定したので、子供ボックスは画面左下に表示されています。

【 html 】

＜p＞サンプルテキスト＜/p＞

＜div style=”position : fixed ; top: 20px; left: 100px; width: 100px; height:100px;

background-color: #769BB9; “＞

＜span style=”width:100px; height:100px;”＞＜p＞子供ボックス＜/p＞＜/span＞

＜/div＞

子供ボックス｢ position : fixed ; ｣指定

注意点

｢ position : fixed ; ｣指定をする際の注意点としては、｢ position : fixed ; ｣指定は全ての環境で正しく動作するわけではないという点。
IE6以下、ios4以下、Android2.1以下は未対応です。これらの未対応環境は、現在ではユーザー数はかなり少なくなってきていると思いますが、一応意識しておいた方がいいと思います。
また、スマホ・タブレット端末に関してはios5以上、Android2.2以上で「fixed」に対応したらしいですが、実際はまだ不具合が多いとされています。
いずれ解消されるまでは、スマホ・タブレット向けに要素を固定させたい場合はCSSではなく、JavaScriptを使う等の代替手段で対応しておく必要があります。