今回はpositionについて紹介します。
positionを覚えると要素の位置を自由自在に動かすことができるようになります。
ヘッダーなどを設置する上で非常によく使うので是非覚えましょう。

positionとは？

See the Pen OEZobY by kiharaneko (@kiharaneko) on CodePen.

positionプロパティは、要素を相対位置か絶対位置かを指定する際に使用します。
後で詳しく説明するのですが、要素の位置を動かすためには、
top、bottom、left、rightという別のプロパティを一緒に使用します。
positionプロパティの値には以下の5種類を指定します。

static

特に配置方法を指定しません。これが初期値です。
この値のときには、要素の位置を決める「top、bottom、left、right」や、
要素の重なり順を決める「z-index」というプロパティは適用されません。

relative

現在の位置を基準にして相対的な位置を決めます。
topやz-indexなどが指定出来るようになる以外はstaticとほぼ同じです。
absoluteの親要素に設定することが多いです。

absolute

親要素を基準に絶対位置への配置となります。
親要素がstatic(初期値)の場合には、ウィンドウ全体の左上が基準位置となり、
static以外の値が指定されている場合には、親要素の左上が基準位置となります。
親要素にはrelativeを設定することが多いです。

fixed

absolute同様、絶対位置への配置ですが、
スクロールしても位置が固定されたままとなります。
よくヘッダーなどで使用されます。

sticky

これはrelativeとfixedを合体させた異質なプロパティです。
通常時はrelativeなのですが、
スクロール位置が指定した値まで行くとfixedに変わります。
ちなみに、横スクロールにしていた場合は横にくっつけることもできます。
そして、fixedになれる範囲はstickyがかかった要素の親要素の範囲内までです。

また、stickyがかかった要素の下に、
別のstickyがかかった要素がある状態でスクロールしていくと、
その別の要素の位置まで行くと上にあるstickyのfixedが解除されて、
次は下のstickyにfixedがかかります。

注意点は、親要素も含め先祖要素にoverflow: hidden;があると使えないことや、
IEに対応してないことです。
IEに対応させたい場合などはスクリプトなどを使用しましょう。
「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky | コリス

要素の位置を指定する「top、bottom、left、right」

このプロパティは、positionプロパティと一緒に使用します。
その要素の基準位置からの距離を上下左右それぞれ指定することができます。
topは上から、bottomは下から、leftは左から、rightは右からの距離を指定でき、
値はwidthやmarginなどと同様にpxや%などの数値で指定します。(初期値はauto)

指定方法

See the Pen yEjweZ by kiharaneko (@kiharaneko) on CodePen.

基本的には2つセットで使用します。
上の例だと、
「top:0;、left:0;」とすると、親要素の左上にきっちりくっつき、
「bottom:0;、right:0;」とすると、親要素の右下にくっつきます。

また、「leftとright」、または「topとbottom」を
同時に指定することは通常ありません。

要素を上下左右中央に配置する

See the Pen oyyLMZ by kiharaneko (@kiharaneko) on CodePen.

先ほど「leftとright」、または「topとbottom」を
同時に指定することは通常ありません。
と言ったばかりですが、これは例外です。

2つ指定どころか4つ同時指定です。
こうすることで要素を上下左右中央に配置できます。

要素の重なり順を指定する「z-index」

See the Pen BVVzQY by kiharaneko (@kiharaneko) on CodePen.

z-indexは、要素の重なり順を指定する際に使用します。
通常要素が重なった場合、HTMLで下に書いてあるものが上に表示されますが、
z-indexを設定することで、HTMLの順序を無視して重ね順を変更できます。

auto

親要素と同じ階層になります。これが初期値です。

整数値で指定

重なりの順序を整数で指定します。
0を基準として、値が大きいものほど上になります。
マイナスを指定すると何も指定していないものよりも下になります。
ただし、position:static;(初期値)の時は適用されません。

ちなみに、同じ数値のものが重なった場合は、
通常通りHTMLで下に書いてあるものが上に表示されます。