CSSの「position relative」の役割

「position:relative;」って何のためにあるの？

その疑問を解決します。

「position」とは

そのままポジション（位置）を整えるプロパティ。
次に、どの様にポジションを整えるかというと「relative（相対的）」？

「relative(レラティブ)」とは

relative＝相対的と言われても一般的じゃないし理解が難しけど
「基点」みたいに考えています。
例えば以下のHTMLがあった場合

【HTML】

<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>

表示順は、「.top」「.center」「.bottom」で上から順番に表示されます。
これに以下のようなCSSを当てた場合

【CSS】

.top {
  position: relative;
}
.center {
  position: relative;
}
.bottom {
  position: relative;
}

表示順は変わらず「.top」「.center」「.bottom」となる。
これだけだと「position:relative;」は、書いても書かなくても一緒。

でも「relative」は、「position」の基点となる要素としてとても重要。
例えば上のHTMLの「.center」の子要素に「position:absolute;」がある場合、
「absolute(アブソリュート)」は「.center」の左上が基点となる。

【HTML】

<div class="top">トップ</div>
<div class="center">
  センター
  <div class="center-inner">
    センターの中の要素
  </div>
</div>
<div class="bottom">ボトム</div>

【CSS】

.top {
  position: relative;
}
.center {
  position: relative;
}
.center-inner {
  position: absolute;
  top: 0;
  left: 0;
}
.bottom {
  position: relative;
}

基点になる「relative」が無いと、「absolute」を指定した要素は画面の左上に寄ってしまって
レイアウトがやり辛くなっちゃうから大事な要素なんだ。
「absolute」は、要素の高さも幅もなくて、
ここの右側にある緑いろしたボックス見て分かる通りフワフワでめっちゃ扱いずらい。

relative

absolute

これは背景の灰色（relative）を基点にして、右上からちょっとずらして緑の玉を配置している。
この様に要素の上に重ねるボタンとかの表示に「absolute」は向いている。
例えば背景に灰色じゃなくて写真を設定して、その上にシェアボタンやダウンロードボタンなんかを設置すると
とっても機能的なデザインになります。

「relative」の大事さが少しでも伝わるといいけれど、
ウェブサイトを作ると一度は登場するプロパティなので、頭の片隅に置いておいてもらえたら嬉しいです。