CSSのプロパティに、オブジェクトの位置を指定する「position」というものがあります。
少し癖のある仕様となっておりますが、理解して操作できるようになるとデザイン制作の幅も広がり、制作スピードも上がってきますので、しっかりと学習しておきましょう。
「position」プロパティとは
「position」プロパティはオブジェクトを配置する位置を決めるプロパティで、値には「static」「relative」「absolute」「fixed」の4種類を指定します。
「position」プロパティの値選考で大事になるのは「基準点」になります。ですので、まずは大まかに仕様の違いを表で記しておきます。
| static | relative | absolute | fixed |
| 初期値の為なし | 現状の位置 | 親要素の位置 | ウィンドウ |
また、「position」プロパティを指定した際には、基準値に対する位置・移動距離の指定が必要になります。
位置・移動距離は、「top」「left」「bottom」「right」プロパティにて指定します。
各英単語の方向を基準に、反対方向に対しての移動距離を、数値pxや％にて指定します。
「position」プロパティの値などに追加する形で記述するのではありませんので、ご注意ください。
「position:static;」
それでは、詳しく説明して参ります。
「static」は日本語で「静的」という意味で、動きのない状態を指します。
その意味合いの通り、「static」は「position」プロパティの初期値になりますので、変化をつけたい場合に利用する事はないでしょう。
しかし、例えばレスポンシブ仕様にて、スマホ表示時にはPC表示で有効の「position」を初期値に戻して解除したい場合などには有効に活用できるかと思います。
「position:relative;」
「relative」とは、日本語で「相対的」という意味になります。
相対的とは、何かと比較する形でありますので、基準値が必要になります。
「relative」を使用するのに覚えておく大事な事は、「現状の位置」が基準点になるという事です。ですので、比較するのは「現状の位置」に対してです。
実装例Before
<div style="width: 100%;margin: 0 auto;">
<div style="height: 50px;background: pink;"></div>
<div style="">何も指定しない場合</div>
</div>
実装例After
<div style="width: 100%;margin: 0 auto;">
<div style="height: 50px;background: pink;"></div>
<div style="position: relative;bottom:20px;">上へ20pxずらす</div>
</div>
実装例Afterでは、「position」プロパティを指定したうえで、「bottom」プロパティにて20px移動する、すなわち「bottom」とは逆の方向に20px移動させる事になりますので、現状の位置から上方向に20px食い込んで表示されています。
「position:absolute;」
「absolute」とは、日本語で「絶対的」という意味になります。
ただし、「position」プロパティの場合の絶対的というニュアンスは、後に説明する「fixed」の方が意味合いが近いと思いますので、日本語での意味は忘れた方がいいかもしれません。
「absolute」を理解するのに大事なのは、「親要素が基準点になる」という事です。
ですので、「absolute」を使用した場合は、それを包む要素（親要素）に対して位置を指定する事になります。
すなわち、ひとつ前の要素タグが親要素の基準値になり、何も親要素がない場合は、全体を包むボディ要素が基準値になります。
ボディ要素を意識して設計する場合は、基本的には後に説明する「fixed」を利用する事になりますので、「absolute」を使用する場合は親要素を意識しないとうまく操作できなくなります。
ですので、「absolute」には必ず親要素が必要になるという事を覚えておきましょう。
また、「absolute」の親要素に「動かしたい基準値」だとつける目印は、「position: relative;」になります。「position:absolute;」ではありませんので、気をつけましょう。
- 「absolute」には親要素が必要
- 親要素には「position:relative;」の目印
- 子要素には「position:absolute;」と「移動距離の指定」
実装例Before
<div style="width: 100%; margin: 0 auto;">
<div style="height: 50px; background: pink;"></div>
<div style="background: yellow;">何も指定しない</div>
</div>
実装例After
<div style="width: 100%;margin: 0 auto;position: relative;">
<div style="height: 50px;background: pink;"></div>
<div style="position: absolute;top:-20px;background: yellow;">上へ20pxずらす</div>
</div>
実装例Afterでは、「position」プロパティを指定したうえで、「top」プロパティにて-20px移動する、すなわち「top」とは逆の方向に-20px移動させる事になりますので、親要素（ピンクの背景）の左上の位置から上方向に20px食い込んで表示されています。
あれ？なんでわざわざ-20pxというややこしい表現をしたのだろう？と思われた方は鋭いですね。
この場合、「bottom」で指定してしまうと、親要素（ピンクの背景）の一番下からの移動になるので、移動距離も長くなり、わかりずらかったのでそうしました。
「relative」と「absolute」の違い
上記で説明している通り、「relative」は「現状の位置からの移動」、「absolute」は「親要素の位置からの移動」になり、以下のような差が出てきますので、きちんと挙動を理解した上で使っていく必要があります。
特徴1
例えば、横並びに配置したオブジェクトの「黄色のブロック」を移動させる場合。
実装例基準
<div style="width: 30%;margin: 0 auto;background: pink;">
<div style="height: 50px;width: 80%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;background: yellow;"></div>
</div>
実装例After 「relative」
<div style="width: 30%;margin: 0 auto;background: pink;">
<div style="height: 50px;width: 80%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: relative;left: -200px;top:-50px;background: yellow;">R</div>
</div>
実装例After 「absolute」
<div style="width: 30%;margin: 0 auto;background: pink;position: relative;">
<div style="height: 50px;width: 80%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: absolute;top:-20px;left:-10px;background: yellow;">A</div>
</div>
「R」と書かれているものが「relative」指定、「A」と書かれているものが「absolute」指定のものになります。
移動距離の指定値は変わってきますが、「relative」でも「absolute」でも同様の演出をする事が可能なのがわかります。
このように指定する事で、オブジェクトの左肩にバッジのようなものを配置する事ができますね。
しかし、実は問題があります！
ウェブサイトにはレスポンシブ仕様というものがありますので、デバイスに応じてどんどん横幅の大きさ、時には縦の大きさすら変化していく事があります。
それでは、試しに上で実装した「cyan」の横幅をレスポンスシブが効いているとして、80％→50％→30％と縮めていってみます。
実装例After 「relative」
<div style="width: 30%;margin: 0 auto;background: pink;">
<div style="height: 50px;width: 80%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: relative;left: -200px;top:-50px;background: yellow;">R</div>
</div>
<div style="width: 30%;margin: 0 auto;background: pink;">
<div style="height: 50px;width: 50%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: relative;left: -200px;top:-50px;background: yellow;">R</div>
</div>
<div style="width: 30%;margin: 0 auto;background: pink;">
<div style="height: 50px;width: 30%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: relative;left: -200px;top:-50px;background: yellow;">R</div>
</div>
実装例After 「absolute」
<div style="width: 30%;margin: 0 auto;background: pink;position: relative;">
<div style="height: 50px;width: 80%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: absolute;top:-20px;left:-10px;background: yellow;">A</div>
</div>
<div style="width: 30%;margin: 0 auto;background: pink;position: relative;">
<div style="height: 50px;width: 50%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: absolute;top:-20px;left:-10px;background: yellow;">A</div>
</div>
<div style="width: 30%;margin: 0 auto;background: pink;position: relative;">
<div style="height: 50px;width: 30%;background: cyan;display: inline-block;"></div>
<div style="display: inline-block;width: 30px;height: 30px;position: absolute;top:-20px;left:-10px;background: yellow;">A</div>
</div>
以上の例を見ればわかるように、レスポンシブ仕様の事を考えた時に、「absolute」の場合は基準点が変わらず、「relative」の場合は位置がずれて使いものにならない場合があります。
もちろん、デザインによってはなんの影響もなく実装できる事もあります。
ですので、「relative」と「absolute」の基準点がどこであるのかをきちんと把握した上で使い分けていくようにしましょう。
特徴2
また、「relative」は「元の領域を確保したまま移動させる」、「absolute」は「元の領域を確保せず移動させる」という特徴もあります。
以下は、今回の基準となる設定です。黄色のブロックを上で説明したように、バッジ風にアレンジします。
実装例Before
<div style="width: 30%;margin: 0 auto;background: pink;">
<div style="height: 30px;width: 30px;background: yellow;"></div>
<div style="width: 100%;height: 100px;background: cyan"></div>
</div>
実装例After 「relative」
<div style="width: 30%;margin: 0 auto;background: pink;">
<div style="height: 30px;width: 30px;background: yellow;position: relative;bottom: -10px;left: -10px;z-index: 99">R</div>
<div style="width: 100%;height: 100px;position: relative;background: cyan"></div>
</div>
実装例After 「absolute」
<div style="width: 30%;margin: 0 auto;background: pink;position: relative;">
<div style="height: 30px;width: 30px;background: yellow;position: absolute;top: -10px;left: -10px;z-index: 99">A</div>
<div style="width: 100%;height: 100px;position: relative;background: cyan"></div>
</div>
まず、今回は重なりの都合があり、今までの状態ではうまく実装できませんでしたので、「z-index」プロパティを追加使用しています。「position」プロパティに必須のものではありません。
さて、上の例を見て違いがわかりましたでしょうか？
どちらの書き方でも同じように見せる事ができています。さらに、縦に並ぶオブジェクトですので、レスポンシブの影響も少ないと言えます。
しかし、「relative」は「元の領域を確保したまま移動させる」との事でしたので、黄色のオブジェクトが移動しても、はっきりと背景のピンク色が見えますので、元の領域がある前提で、黄色ブロックだけが移動しているのがわかります。
対して「absolute」は、「元の領域を確保せず移動させる」という事でしたので、背景のピンク色は完全に消滅してシアンの色が黄色ブロックに食い込む形になっております。
これに関してはレスポンシブの「特徴1」の問題のように、どちらが良いという優劣はありません。
時と場合により、自分が実装したい形になってる方を選べば良いでしょう。
ですので、こちらの特徴もきちんと把握しておくようにしましょう。
「position:fixed;」
「fixed」は、日本語で「固定した」という意味になります。ですので、特定の場所に「ずっと固定し、表示し続ける」指示になります。
「fixed」の基準位置は、最初から「ウィンドウ画面（見えているブラウザ画面のまま）」と決まっておりますので、基本的には基準となる親要素不要です。
例えば、以下のようなコードを記載すると、上部にメニューバーなどをずっと固定しておくような事が可能になります。
<div style="position: fixed;top:0px;">fixed</div>
今回の場合は、「fixed」という文字が上部に固定される事になるのですが、表示するとサイトデザインがおかしくなってしまいますので、実装例での紹介は控えます。
まとめ
いかがでしたでしょうか？
サイトにリッチな演出をするのに役立つ「position」プロパティについて解説してきました。
「fixed」も利用する事は多いですが、「relative」と「absolute」の違いについてはきちんと把握しておかないと思ったように実装できず困る事になりますので、その点各特徴をしっかりと把握するようにしておきましょう！
