[学習45日目]CSS ~positionの基本~

今日はCSSのpositionプロパティについて！

使ったことあるけど、なんかいつも感覚的にやってて深くは理解していなかった。
感覚的にやっているから、思うような設定ができなかった。

なので、もう一度ちゃんと1から学びました！

#position:static;
これは、「なにもしない」という意味。
デフォルト値がstaticなので、基本はわざわざ設定しなくていいのかな？なんのためにあるんだろう？
と思って調べたところ、

・要素は通常の位置に：上下左右に動かすことができない
・要素の位置を調整できない：topやleftなどを指定しても効かない
・z-indexを指定できない：要素の重なり順を変えられない

という特徴がありました！なるほど。
これらを適用したい時は、わざわざ
position:static
を指定するってこと！

#position:relative;とposition:absolute;

##relative
relativeは「相対的に」という意味だから、
今のstaticな位置から相対的に、
topやbottom、left、rightで指定した分だけ動かすって感じかな

style.css

position:relative;
top:50px;
left:50px;

としたら、今のいちから上へ50px,左へ50px分動かしてくれる。

##absolute;
relative(相対的な)の対義語、「絶対的に」という意味。

文で説明すると、

positionにabsoluteを設定すると、positionがstatic以外に設定された親要素の左上端を基準として絶対位置を指定することができます。
親要素のpositionプロパティがstatic以外であれば、親要素の左上端が基準 となります。
親要素が全てstaticである場合には、ドキュメントの左上端が基準となります。

みたいです。ちょっと難しい。。。。
とにかく
・直近のstatic以外の親要素の左上端が基準になる。
・ただし、親要素が全てstaticの場合はドキュメントの左上端が基準になる
とだけ覚えておこう

#fixedはabsoluteの一種
これもちょっとややこしい。
fixedは、「見えている画面サイズを基準とする」ので、
なんと、スクロースしても動かない！

なので、

style.css

position:fixed;
right:50px;
bottom:50px;

とすると、常に見えている画面の右から50ｐｘ、下から50pxの位置に絶対的にいてくれる。

プロパッティの設定方法の基本はこれだけ！

positionは
・static
・relative
・absolute
・fixed
の4つが基本！