たまーにCSSやるといつも忘れてるこのposition。。

positionの種類

positionにはいくつか種類があるよ！

static

無指定と同じ。 つまり初期値ってことかな。

relative

relativeとは「関係」 ある地点から相対的にどの位置になるかを指定する。 「ある地点」とは? 本来配置される予定だった位置です！ .relative_test { position: relative; top: 0px; left: 0px; みたいに0%ならば本来指定される位置とイコールなので結果てきにstaticと同じになる

fixed

固定のやつ。 スクロールしても固定してあるやつとかありますよね。 あれとかに使います。

absolute

static以外の親要素のpostisonのプロパティを持つものを再起的に見に行って、もしあった場合はそこを起点に top:30pxの位置指定をおこないます。 一つもpositionの値を持つものがなかった場合、bodyタグの位置がこれの対象になる。。みたいな感じです。

なのでrelativeを親に持たせておいて、 relativeの0%はstaicと同じって、staicと分ける意味ある？ と思ったけど、そうか、、そういう位置の親対象設定用として意味があるんですねー。。

名前がよくない！ child-ralativeとかの方がいいような気がしてきた！ 長いけど。。😅

まとめ

absaluteはよく出ているけど一番わかりづらいよ！ relativeとタッグで使うことが多いよ！

relativeはその要素そのものを動かすよりもabsaluteの親要素の設定として用いることが多いよ！