cssのposition  relativeとabosolute 14

今、自作アプリをcssでコーディングしている。

その中で、positionの「relative」と「absolute」が他のコードを読むにしても、書くにしてもあいまいだと思ったのでまとめる。

 

positionについて

要素の配置を適用範囲内で指定の場所に動かせる。

top、left、right、bottomを使い、場所を指定する。

 

positionを指定しない状態だと、基本的にpaddingやmargin、その他にも何かしらの要素

を挟み地続きで配置を決めていくが、positionの場合それらを度外視して指定できる。

 

自分の理解ですごく簡単に言うと、デフォルトは詰め詰め状態。

positionは好きな所におけるので、スカスカ状態。

 

もう一つ特徴は、他要素のレイヤーから独立した階層を持つ。気がする。

 

relativeとabsoluteの違い

結局、relativeとabsoluteの何が違うか。それは適用範囲だ。

 

relativeは親要素があるとその範囲内で独立し、自由に指定できる。

一方、absoluteは親要素がrelative意外だと、親要素関係なくページ内を指定しないといけない。

 

 

うまく説明できていない。

もう少し理解が必要かも。