15分で理解するCSS position

複雑なレイアウトやブロック要素の重なりを回避するために使用頻度が高いCSSのpositonプロパティ。

デフォルトではstaticとなっており指定しなくてもしても関係ない、位置指定無効値といったところ。

fixedとはviewport(画面表示領域)に対して相対的な絶対位置を指定する値。
いつも画面上、もしくは表示領域上の定位置を陣取る”花見の場所取り”的なプロパティ値。

relativeはviewportまたは入れ子された親要素を基準にして相対的な位置をとる。直上の顔色を見ながら立ち位置を柔軟に変え、同じ位置関係であれば他のブロック要素などもお構いなしの心臓の強さ。

absoluteは直親のタグ内の左上を基準として絶対位置に配置される。スクロールの影響も受けるので、fixedとは似て非なる絶対位置主義者。頑固で融通が利かない。relativeとは常に相いれないで重なりやすい。

表示領域の定位置=fixed

親ブロック要素内の定位置=absolute

親ブロック要素位置に対して相対位置=relative

忘れてよいプロパティ値=static

といったところだろうか。