なぜ親要素に position: relative, 子要素に position: absolute を指定すると 子要素の位置をいい感じに指定できるのか

ある要素を他の要素に重ねて表示したかったり
特定の位置から〇〇px動かした、この位置に要素を配置したい！といった際に
以下のように、親の要素にposition: relative, 子の要素にposition: absoluteを指定することで
子要素の位置を自由に配置することが一般的かと思います。

See the Pen position-sample1 by KeitoSato (@Keito13) on CodePen.

なぜ親要素にposition: relative, 子要素にposition: absoluteを指定すると子要素の位置をいい感じに指定できるのか

この記事では、なんとなく「こういうものなんだ」としか理解できていない方と一緒に、CSSのpositionプロパティについて確認していこうと思います。

positionプロパティの値

positionプロパティで主に使用される値は以下の通りです。¹

• static
• relative
• absolute
• fixed
• sticky

それでは、positionの基本であるstaticと
主題であるrelativeとabsoluteについて、その使い方を詳しく見ていきましょう。

position: static

staticはpositionプロパティの規定値です。
positionプロパティを特に何も指定しなかった場合と、同じ振る舞いになります。

要素の配置位置は指定できず、画面の左上から順番に配置されていきます。
つまり、 topやrightといった位置指定のプロパティや
z-indexによる要素の重なり順の指定は
position: staticが指定された要素には行えません！

See the Pen static-sample by KeitoSato (@Keito13) on CodePen.

position: relative

relativeとは「相対的」という意味です。
「相対的」をオンライン辞書のweblioで引いてみると
デジタル大辞泉で以下の通り解説されております。

他との関係において成り立つさま。また、他との比較の上に成り立つさま。「—な価値」「物事を—に見る」⇔絶対的。

positionプロパティにおけるrelativeは、まさに相対的な位置の指定方法です。
では、何と関係して位置を決めているかというと、元々自分が表示されるはずだった位置です。

position: relativeが指定された要素は、まずposition: staticの時と同様に、画面左上から順番に配置されます。
その後、自分自身が表示されている位置を基準に、topやrightなどで指定された分だけ自身を移動させます。
この時、後続の要素の表示位置には影響を与えません！
つまり、自分自身が元々表示されていた領域を詰めることはしないということです。

See the Pen relative-sample by KeitoSato (@Keito13) on CodePen.

position: absolute

absoluteは、「絶対的」という意味です。
こちらもweblioで引いてみると
デジタル大辞泉で以下の通り解説されています。

他の何物ともくらべようもない状態・存在であるさま。「—な信頼を得る」「—に有利な立場」⇔相対的。

positionプロパティにおけるabsoluteは、指定された要素の元々表示されていた位置なんて気にしません。
こいつの位置はここだ！と指定した箇所に表示させます。
では、一体どこを基準にして配置を決めるのかというと…
要素の祖先を辿っていって、最初に位置が指定されている要素が基準となります。

「位置が指定されている」とはどういうことかというと
positionの指定が relative, absolute, fixed, sticky のいずれかである
ということです。

この仕様に、この記事の表題である
「親要素にposition: relative, 子要素にposition: absoluteを指定すると子要素の位置をいい感じに指定できるのは何故か」の答えが詰まっています！

position: absoluteの要素の親は、relativeじゃなくても良い

position: absoluteの要素の位置を決めるのは、祖先の要素で最初に位置が指定されている要素です。
なので、なにも親要素のpositionがrelativeでなくても、absoluteの位置指定は可能ということになります。

See the Pen Untitled by KeitoSato (@Keito13) on CodePen.

上のCodePenでは、relative, absolute, fixed, stickyによる位置指定がされている親要素をそれぞれ持つ、position: absoluteの要素を見ることができます。
親要素のpositionがrelativeでなくとも、配置の指定が問題なく行われていることがわかるかと思います。

relativeとabsoluteがセットで使われやすい理由

position: absoluteの要素の親は、relativeじゃなくても良いことはわかりました。
では、なぜrelativeとabsoluteは
まるでイディオムのように、セットで使われることが多いのでしょうか。

それは、position: relative以外の要素は、ちょっとクセがあるからだと、言えるかもしれません。

absolute

absoluteは上で述べた通り、元々表示されていた位置なんて気にしない、"絶対的"な存在にしてしまいます。
relativeは、自分自身が元々表示されていた領域を確保したまま、配置を移動しますが
absoluteは、自分自身の元々の表示領域を確保しません。
後続の要素は詰めて配置されるという仕様になっています。

fixed

fixedも、自分自身の表示領域を確保しません。
fixedを持つ要素は、スクロールの影響を受けず
常にページの指定された位置に表示され続けます。
子要素にabsoluteの要素があれば、その要素も一緒に
常にページの指定された位置に、表示され続けることになります。

sticky

stickyは、relativeと同様に、自身の表示領域を確保します。
しかし、画面がスクロールされ指定された位置に自身が表示されると
fixedのように、その場所に留まり続けて表示されるという、一風変わった挙動となります。
子要素にabsoluteの要素があればその要素も一緒に、その場に留まり表示され続けます。

かたや、relative

relativeは上述した通り、自身の元々の表示領域を確保します。
更に言えば、topやrightなど配置を移動させる指定を行わなければ
staticの要素と何ら変わらず、元々の自分の位置にいてくれます。
こうすれば、位置を指定する要素は、absoluteの子要素だけで良くなり
他要素の表示位置に影響も与えません。
また、最終的にどこに表示されるのかも、他の値に比べてとても分かりやすいです。

これが、relativeとabsoluteがセットで使われやすい理由だと言えるでしょう！

本記事のまとめ

• position: absoluteの特徴
  • 祖先の要素を近い順に辿って、relative, absolute, fixed, stickyのいずれかが最初に指定された要素の位置を基準に、自身の位置を移動する
  • 自分自身が元々表示されるはずだった領域の確保は行われず、後続の要素が詰めて表示される
• position: relativeの特徴
  • 自分自身のデフォルトの表示位置を基準に、位置を移動できる
  • 自分自身が元々表示されるはずだった領域は確保され、後続の要素の表示位置に影響を与えない
  • 位置を移動させなければ、position: staticの要素と見た目は変わらずに配置される

これらの特徴から…

position: absoluteの要素以外は、特にいじらずに配置させたい！
そんな時に、親要素のpositionをrelative
目的の要素を子要素にして、positionにabsoluteを指定すると
目的の要素以外に影響を与えずに、自由な要素の配置ができるぞ！

参考URL

• MDN Web Docs - position

1. これらの他、initialやunsetといった、複数のプロパティで指定することができる値もあります ↩