positionでのレイアウトの設定方法

positionとFlexbox は表示位置のレイアウトで混同してしまいそうです。
Flexboxはブラウザ全体に対するレイアウトで使うのに向いていて、positionは部分的にレイアウトを変えたいときに使う。

例えばpositionのfixedはブラウザの左上が基準点となる

position 使い方

positionのプロパティは、relative(読み方レラティブ)、absolute(アブソリュート)、fixed(フィックスド)の三つを覚えればよい。

relativeは相対位置で要素自身の左上を基準として、top/leftまたはbottom/rightで配置位置を指定する。
ブラウザをスクロールしても、ついてこない。
relativeの意味は相対的。そのまんまだね。

absoluteは絶対位置でブラウザの左上を基準として、top/leftまたはbottom/rightで配置位置を指定する。
ブラウザをスクロールしても、ついてこない。
absoluteの意味は絶対の、そのまんま。

fixedはabusoluteと似ているが、ブラウザの縦スクロールが長くなった時にスクロールするとついてくる。
例えばブラウザの中で常に表示させたいナビゲーション(メニュー)などに使える。
fixedの意味は不動・一定・所定といった意味が含まれる。

講義動画でrerativeとabusoluteを組み合わせたコーディングがあったけど、利用シーンが思い出せない。