position: relativeは安易に使わない方が良いのかも。。

アプリ作成にて学んだ心構えを書いていきます。

それはズバリ！ 、、、

position: relativeは極力使わない！！

これです。

このcssプロパティ、position: relativeは、
役割として、指定した要素を基準点とする機能となっています。

普通にdiv要素を積むと、
index.html.erb

<div class='red'>
</div>
<div class='blue'>
</div>

css

.red {
  height: 50vh;
  width: 50vw;
  background-color: red;
}

.blue {
  height: 50vh;
  width: 50vw;
  background-color: blue;
}

こんな感じで、積み木の概念で左端から積まれていきます。
この赤い要素にposition: relativeを入力すると、
赤い要素を基準として、他要素の表示箇所を定めることができます。

表示箇所を定めたい要素に対して、
position: absoluteを入力して、top,leftなど調整したい方向を入力すると、
position: relativeした要素を起点に適用されます。

例
css

.red {
  height: 30vh;
  width: 50vw;
  background-color: red;
  position: relative; ←これを追加
}

.blue {
  height: 30vh;
  width: 30vw;
  background-color: blue;
  position: absolute;　←これを追加
  top: 10vh;  ←これを追加
  left: 10vw;　←これを追加
}

上記のようになります！
ただブロック要素を積むだけでは要素同士が重なることは起きないですが、
position: relativeの作用で赤い要素が基準点となったことでこの表示になりました。

ビューファイル実装にあたって、
要素毎に並びを調整したいところが出てくると思います。
そういった時に活用できるコードになります！
ただ！こちらを使用すると、
レイアウト崩れを起こしやすいリスクに気付きました

要素が少なくシンプルなものは支障ないかと思います。
細かな要素を組み合わせていく場合、
調整や修正が複雑になってくるんですよね

私の場合、実装を進める中でレイアウト変更を試みた時に、
position: relativeされた要素があるために配置したい場所にうまく置けないことや、
スペース配分が分かりにくくなり苦戦することがありました。

振り返ってみて

ビューファイル編集を行うときは、
極力Flexboxや、margin・paddingプロパティを組み合わせていく方が、
修正や変更を加える際も分かりやすくて良いなと感じました。
色々と反省しながら頭に入れていけるので、
0からの実装は収穫が大きいと感じます
まだまだ日々勉強あるのみ。。