positionについて
CSSのpositionについて備忘録兼ねて記載します。
基本形の4つ
static
style.css
position:static;
positionのデフォルト、初期値
absolute
style.css
position:absolute;
top:30px;
left:50px;
親要素の左上を基準に絶対的に位置を移動させる。
その際に親要素にposition:relativeを指定する。
relative
style.css
position:relative;
top:10px;
left:10px;
現在位置を基準に相対的に位置を移動させる。
fiwed
style.css
position:fixed;
top:0;
left:0;
要素を固定する。
スクロールした時に上部にメニューが固定されている時などで使う。
まとめ
このようにpositionは基本relativeとabsoluteを使用する事がほとんどです。
要素移動する時に相対的に移動させるか、絶対的なのかを判断して使用していただければ幸いです。