HTMLで要素を絶対配置したい時に使う「position: absolute;」ですが、
いつも使い方があやふやで迷った結果思い通りに配置されないことが多いので、まとめておきます。
そもそもの用語の意味
position: relative; （相対的な）
position: absolute; （絶対的な）
実際の使い方
固定したい要素がある場合は、position: absolute;を指定する。
ただこれだけでは置きたい場所に設置ができないので、
親要素を起点として考えて、そこからの距離も併せて指定する。
(top: 0; left:0; だと要素が左上に固定されることになる)
起点とする親要素にはposition: relative;の指定を忘れずに行う。
例）このように指定すると、子要素は親要素の中央に配置される
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
}
親要素からみて左上にぴったりくっついた状態で絶対配置されているが、
magin: auto;により余白が調節されることで、
結果的に中央配置になった状態。
まとめ
- 要素を固定したい時は、position: absolute;を指定
- その上で、左上を起点にしてどの位置に絶対配置をするのかを指定
- 親要素の左上を起点にしたい時は、親要素にposition: relative; を指定
