Devsway

日々の記録とか記憶とか。

たまーに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の親要素の設定として用いることが多いよ!




カテゴリー

オレオレIT用語辞典