positiontとは
ボックスプロパティの基準位置を指定するプロパティのことで、
positionプロパティを使うことで、要素を重ねたり、固定したりするなど、さまざまなレイアウトを作ることができます。
positionプロパティはCSSで以下のように書きます。
position : 値
positionの値
値には色々な種類があり、したいレイアウトによって変えます。
static
positionのデフォルトで設定されている初期値です。
初期値であるため、使用する機会はあまりありません。
relative
relativeは、現在の位置を起点に指定した要素を動かすことができます。
topやleftを指定することで好きな位置に要素を配置することができます。
覚え方としては「元いた位置から○○px移動させる。」と覚えましょう。
absolute
relativeで指定されている要素を基準として、位置を指定します。
absoluteは「絶対位置」と呼ばれ、「最も近い親要素の位置に対して絶対的」に配置します。基準となるのは、親要素の左上の位置です。
fixed
スクロールした際に移動せず、決まった位置に固定することができるプロパティです。
よくヘッダー部分などで使われることが多く、スクロールしてもヘッダー部分だけ固定されます。
最後に
このように、positionプロパティを使うと、要素を様々な場所へ配置することができますので、例えば、要素の上に写真を配置したり、写真の位置を変えたり、デザインの幅が非常に広がります。