【CSS】positionプロパティで要素を自由に配置しよう

ホームページを見ていると、画像の上に文字が乗っていたり、スクロールするとヘッダー部分が固定されたまま追従したりするものに遭遇したことがあると思います。
そういったデザインには、CSSのpositionプロパティが使用されています。
今回は、positionプロパティについてご紹介します。

positionプロパティとは？

positionプロパティとは、要素の表示位置を決める際に使用します。
値はstatic、relative、absolute、fixedの4種類があります。

値の説明

static

div {
	position: static;
}

初期値です。positionプロパティを指定していない要素には、自動的にstaticが指定されています。
要するに、要素は通常の位置に配置されていることになります。
意味は後述しますが、staticの場合はtop、bottom、left、right、z-indexプロパティを適用することができません。

relative

div {
	position: relative;
}

通常（static)の位置に対して、相対的な位置を指定する値です。
relativeを指定しただけでは表示はstaticと変わりません。
ただしrelativeを指定すると、top、bottom、left、right、z-indexプロパティを適用することができます。
ここがstaticと違うポイントとなります。

top、bottom、left、rightプロパティ

div {
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

要素を配置する際に、基準となる位置から要素までの距離を指定する値です。初期値はautoです。
relativeを指定した要素の場合は、これらのプロパティを指定しなかった時の（staticと同じ）位置が基準位置となります。
単位はpxやem、%なども指定できます。
static以外のpositionプロパティで指定することができます。

z-indexプロパティ

div {
	position: relative;
	z-index: 1;
}

要素の重なりの順序を指定する値です。初期値はautoです。
基準は0で、数値が大きくなるほど上に重なるイメージです。
整数での指定が可能で、最小値は-2147483647、最大値は2147483647を指定することができます。
マイナスの値を指定した要素は、何も指定していない要素よりも下に潜ります。
z-indexプロパティも、static以外のpositionプロパティで指定することができます。

absolute

div {
	position: absolute;
}

絶対的な位置を指定する値です。
親要素にstatic以外の値が指定されている場合は、親要素が基準位置になります。
親要素が何も指定されていない（staticである）場合は、ウィンドウ全体の左上が基準位置になります。
absoluteも、基準位置をもとにtop、bottom、left、right、z-indexプロパティを適用することができます。

以下は記述例です。親要素（parent）に対して、子要素(child)が上から20px、左から20pxの位置に配置されるイメージです。

.parent {
    position: relative;
}

.parent .child {
    position: absolute;
    top: 20px;
    left: 20px;
}

fixed

div {
	position: fixed;
}

absoluteと同様、絶対的な位置を指定する値です。
ただしfixedは、スクロールしても位置が固定されたままになります。そのため、ヘッダなど固定しておきたい要素で使用すると便利です。
fixedも、基準位置をもとにtop、bottom、left、right、z-indexプロパティを適用することができます。

まとめ

positionプロパティを使いこなすことで、ページの見せ方の幅がぐっと広がります。
親要素1つに対して子要素が複数あった場合にも、それぞれにabsoluteやfixedを適用して重ねることもできます。
最初は慣れないかと思いますが、試してぜひ使ってみてください。