CSS の positionプロパティとは? positionの種類一覧と使い方・relative, absolute, fixed, sticky の使い分け方まとめ

今回は、CSS の positionプロパティの種類一覧と使い方や、relative, absolute, fixed の使い分け方についてまとめて解説していきます。
positionプロパティとは、positionを設定した要素に対して、基準位置(基準要素)からの配置位置を指定するときに用いられるプロパティです。
headerやSideBarなどの要素の表示位置を固定したいときや、要素の上に要素を重ねて配置(表示)したい時などに使用します。
positionを指定する際は、top, right, bottom, left の4つの位置を指定するプロパティを使用して、表示位置を設定していきます。