要素を任意の位置に配置する方法について記事を書きたいと思います。
要素の配置方法
■positionプロパティ
positionプロパティとは指定した要素の配置方法を決めることができるプロパティ。
| 値との組み合わせ | 説明 |
|---|---|
| position: relative; | 現在の位置を基準に相対的な位置を決める |
| position: absolute; | 特定の地点を基準に絶対的な位置を決める(デフォルトの基準はウィンドウ左上) |
| position: fixed; | 要素を指定した位置に固定する |
また、positionプロパティはtop、bottom、left、rightというプロパティとセットで使うことが多い。
■top/right/bottom/leftプロパティ
positionプロパティを指定した要素に、基準（上、下、右、左）の距離を指定することができる。
絶対位置
ブラウザの左上を基準としてとる位置のことを、絶対位置という。
position: absolute;を適用された要素はブラウザの左上が位置の基準になる。
相対位置への要素の配置
ある要素が、他の要素との関係の上に成り立つ位置のことを相対位置という。
親要素にposition: relative;を設定すると、子要素の基準は親要素の左上となり、相対位置をとる。
子要素にposition: absolute;を付与した際、親要素にposition: relative;を付与すると位置の
基準となる。
まとめ
・positionプロパティとは指定した要素の配置方法を決めることができるプロパティのこと。
・positionプロパティを指定した要素に、top/right/bottom/leftプロパティを用いることで、基準（上、下、右、左）の距離を指定することができる。
・親要素にposition:relative;を指定することで、position:absolute;を指定した子要素の基準の位置 を親要素に指定できる。