【個人メモ/レイアウト調整】positionのrelativeとabsolute

本記事の目的

仕事でレイアウト調整をしている際に、モニターや端末によって大きくレイアウトが異なり調整にかなりコストがかかっているため、どの端末で見ても大きく差分が出ないようにしたいと考えた。
HTML/CSSとBootstrapを駆使して可能な限り作り変えていく最中に出会った方法やよくわからないCSSの使い方をメモしておく。

今回の疑問点

既存のシステムのCSSを眺めていた時に以下のような記述があり、使い方がつかめなかったので理解を深めるために調べたことをまとめておく。

.hoge {
  position: relative;
}

実際の使用方法

See the Pen position by M (@Mio-K0408) on CodePen.

親要素（青い四角）にposition: relative;を設定し、子要素に（赤い四角）position: absolute;を設定することで子要素を浮いたような状態にすることができる。
また、z-indexを使用することで要素の裏側に配置することも可能（黄色い四角）
ちょっとした疑問点もちゃんと調べればなんとなくわかるし、今後にも活かせそうなので業務が忙しくない限りは知識をまとめておきたい。

参考記事