要素の配置を指定するプロパティである position ですが、ネットではなんだかわかりにくいとの声が結構聞こえてきます。私も同様に感じていたので、気合を入れて調べてみました。最近ではレスポンシブデザインにも多用されているようなので、避けては通れません。結論を先に言ってしまうと、親：relative・子：absolute の組み合わせと fixed、このふたつを理解しておけばいいのでは？
positionプロパティとは
position プロパティでは次の値を設定することができます。
| static | 通常配置。position プロパティを指定しない場合のことです。position:static; の場合には top・right・bottom・left を指定しても反映されません。 |
|---|---|
| relative | 相対位置。本来その要素が配置される場所を基準に配置される。 |
| absolute | 絶対位置。親要素を基準に配置される。 |
| fixed | 固定配置。スクロールしても位置が変わらない。 |
この説明だけではわからないとは思います。実際の動作がどのようになるのか見てみましょう。
absoluteの親要素にはrelativeが必要である
position プロパティに relative を指定すると、親要素の左上を原点とした相対的な配置をすることができます。
1 2 3 4 5 | <div class="test1"> <div class="test2"> </div> </div> |
この HTML に対して次のような CSS を指定したとします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .test1 { width: 300px; height: 300px; border: 2px #000 solid; margin: 100px; } .test2 { width: 100px; height: 100px; border: 2px #f69 solid; position: relative; top: 30px; left: 30px; } |
このようになります。これは親要素の左上を原点として、上から 30px、左から 30px 移動したものです。
これと同じノリで子要素に absolute を指定すると失敗します。relative を absolute に変更しただけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .test1 { width: 300px; height: 300px; border: 2px #000 solid; margin: 100px; } .test2 { width: 100px; height: 100px; border: 2px #f69 solid; position: absolute; top: 30px; left: 30px; } |
こうなります。
これは test1 を親要素とせずにブラウザのウィンドウが親になってしまっている状態です。はみ出したくないときは test1 に対して relative を指定してあげます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .test1 { width: 300px; height: 300px; border: 2px #000 solid; margin: 100px; position: relative; } .test2 { width: 100px; height: 100px; border: 2px #f69 solid; position: absolute; top: 30px; left: 30px; } |
これで親要素の内側におさまります。
実は親要素に指定するのは absolute や fixed でもよいのですが、慣例的に relative を指定することが多いようなので、このブログでもそれに倣っておきます。
absoluteとrelativeの違い
ポイントになるのは移動の基準と配置後の挙動です。まずは absolute から。例として次のような場合を考えます。
HTML。
1 2 3 4 5 6 7 8 9 10 11 | <div class="test3"> <div class="test4"> </div> <div class="test5"> </div> <div class="test6"> </div> </div> |
親要素に relative を指定し、子要素のひとつを absolute によって位置指定してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .test3 { width: 300px; height: 300px; border: 2px #000 solid; margin: 100px; position: relative; } .test4 { width: 100px; height: 70px; background: #FF0000; } .test5 { width: 100px; height: 70px; background: #00FF00; position: absolute; top: 40px; left: 60px; } .test6 { width: 100px; height: 70px; background: #0000FF; } |
このようになります。
親要素の左上を基準に移動し、後に続く要素は absolute を指定した要素を無視して上に詰めて表示されます。これは感覚的にも理解しやすいはずです。
今度は relative を使って配置する位置を指定してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .test3 { width: 300px; height: 300px; border: 2px #000 solid; margin: 100px; } .test4 { width: 100px; height: 70px; background: #FF0000; } .test5 { width: 100px; height: 70px; background: #00FF00; position: relative; top: 40px; left: 60px; } .test6 { width: 100px; height: 70px; background: #0000FF; } |
するとこうなります。
緑のボックスが本来配置されるはずだった場所を基準として位置が決定されています。しかも、後に続く要素は上に詰めて表示されず、妙な空間があいてしまっています。
これ以外にも、relative を指定された子要素は親要素に文字などがあった場合に位置がずれてしまったり、なにかと使い勝手が悪いです。
1 2 3 4 5 6 7 8 9 | <div class="test7"> じゅげむじゅげむ ごこうのすりきれ かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ くうねるところにすむところ やぶらこうじのぶらこうじ ぱいぽぱいぽぱいぽのしゅーりんがん しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーのぽんぽこなのちょうきゅうめいの ちょうすけ <div class="test8"> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .test7 { width: 300px; height: 300px; border: 2px #000 solid; margin: 100px; } .test8 { width: 100px; height: 100px; border: 2px #f69 solid; position: relative; top: 10px; left: 10px; } |
故に、position プロパティを使うときは親要素に relative を指定し、子要素を absolute によって位置指定するという使い方が多くなると思います。私の不勉強かもしれませんが、「relative もこんな風に使えるよ」とご存知の方がいればご指摘くださるとありがたいです。
じゃあ、fixedはどう使うの？
当ブログにも設置していますが、トップに戻るボタンを作るときに指定するものです。画面をスクロールしても同じ位置に表示されるアレです。
トップに戻るボタン以外にも、ブログのナビゲーションやメニューを常に表示させるのに利用されているようです。
Comment