たまーに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の親要素の設定として用いることが多いよ！
最近のコメント