positionプロパティのabsoluteとrelativeにはどんな違いがあるのか

 要素の配置を指定するプロパティである position ですが、ネットではなんだかわかりにくいとの声が結構聞こえてきます。私も同様に感じていたので、気合を入れて調べてみました。最近ではレスポンシブデザインにも多用されているようなので、避けては通れません。結論を先に言ってしまうと、親:relative・子:absolute の組み合わせと fixed、このふたつを理解しておけばいいのでは?

positionプロパティとは

position プロパティでは次の値を設定することができます。

static通常配置。position プロパティを指定しない場合のことです。position:static; の場合には top・right・bottom・left を指定しても反映されません。
relative相対位置。本来その要素が配置される場所を基準に配置される。
absolute絶対位置。親要素を基準に配置される。
fixed固定配置。スクロールしても位置が変わらない。

この説明だけではわからないとは思います。実際の動作がどのようになるのか見てみましょう。

absoluteの親要素にはrelativeが必要である

position プロパティに relative を指定すると、親要素の左上を原点とした相対的な配置をすることができます。

この HTML に対して次のような CSS を指定したとします。

このようになります。これは親要素の左上を原点として、上から 30px、左から 30px 移動したものです。

20160922_1

これと同じノリで子要素に absolute を指定すると失敗します。relative を absolute に変更しただけです。

こうなります。

20160922_2

これは test1 を親要素とせずにブラウザのウィンドウが親になってしまっている状態です。はみ出したくないときは test1 に対して relative を指定してあげます。

これで親要素の内側におさまります。

20160922_3

実は親要素に指定するのは absolute や fixed でもよいのですが、慣例的に relative を指定することが多いようなので、このブログでもそれに倣っておきます。

absoluteとrelativeの違い

 ポイントになるのは移動の基準と配置後の挙動です。まずは absolute から。例として次のような場合を考えます。

20160922_4

HTML。

親要素に relative を指定し、子要素のひとつを absolute によって位置指定してみます。

このようになります。

20160922_5

親要素の左上を基準に移動し、後に続く要素は absolute を指定した要素を無視して上に詰めて表示されます。これは感覚的にも理解しやすいはずです。

今度は relative を使って配置する位置を指定してみます。

するとこうなります。

20160922_6

緑のボックスが本来配置されるはずだった場所を基準として位置が決定されています。しかも、後に続く要素は上に詰めて表示されず、妙な空間があいてしまっています。

これ以外にも、relative を指定された子要素は親要素に文字などがあった場合に位置がずれてしまったり、なにかと使い勝手が悪いです。

20160922_7

故に、position プロパティを使うときは親要素に relative を指定し、子要素を absolute によって位置指定するという使い方が多くなると思います。私の不勉強かもしれませんが、「relative もこんな風に使えるよ」とご存知の方がいればご指摘くださるとありがたいです。

じゃあ、fixedはどう使うの?

 当ブログにも設置していますが、トップに戻るボタンを作るときに指定するものです。画面をスクロールしても同じ位置に表示されるアレです。

20160922_8

トップに戻るボタン以外にも、ブログのナビゲーションやメニューを常に表示させるのに利用されているようです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP