はじめに

こんにちは。本日はpositionプロパティについて解説していきます！

ウェブサイトのレイアウトをデザイン通りに作っていくために避けては通れないpositionプロパティ。
値の種類が複数あり考え方もややこしく、どのように使うべきかいまいちよく分かっていない…という方も多いのではないでしょうか？

positionを上手く使うことで要素の位置を自由に指定することができ、柔軟な表現が可能になります。
ぜひこの記事を読んでマスターしていきましょう。

位置指定の基本的な考え方

要素を任意の位置に配置する＝起点となる位置に対して上・下・左・右から任意の距離を取る　と考えます。

基本的には横方向のどちらか・縦方向のどちらかからの距離をそれぞれ指定します。
例えば画面に対して要素を左上に配置したいなら、左端からの距離と上からの距離をそれぞれ設定していくイメージです。

上からの距離＝top、下からの距離＝bottom、左からの距離＝left、右からの距離＝right
を用いて具体的な距離を指定します。

positionプロパティの値の種類

positionプロパティには、以下の5つの値を使用することができます。順番に解説していきます！

static

初期値として適用されている値です。要素は特定の基準に沿って配置されますが、
「上」や「左」などからの距離を指定しても位置を変更することはできません。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

relative

要素をその元の位置から任意の場所へ移動させることができます。
下の例では起点を画面全体とし、上から40px、左端から40px離れたところに要素が配置されています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

ある要素の親要素に「position: relative」を命令し、その子要素に対して後述する「position: absolute」を命令することで、
親要素を起点に子要素を任意の場所に配置することができます。（この使い方がメインになってきます）

absolute

最も近くでposition指定されている親要素を起点にして位置を指定します。
下の例では起点を「.wrap」＝親要素とし、親要素に対して上から40px、左端から40px離れたところに子要素が配置されています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

このように親要素を起点に子要素の位置を指定したいときは、
親要素に「position: relative」や「position: absolute」などで位置を指定する必要があります。
もし起点となる親要素が存在しない場合、ページ全体が起点となります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

またpositionで複数の要素を重ねるとき、重なり順を「z-index」プロパティを使って指定することができます。
値には正負の数値を入れることができ、数値が大きければ大きいほど前面に要素が配置されます。

以下の例では子要素1にz-index: 2;　子要素2にz-index: 1;を設定することで、子要素1を前面に表示させています。
z-indexはpositionを命令している要素にのみ使用することができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

加えて、子要素に対してz-indexの値に負の数値を設定することで、親要素の後ろに子要素を配置することができます。
以下の例ではブルーの背景が親要素、チラッと出てくるスワンボートが子要素になっていて、
子要素が親要素の後ろに隠れていることが分かると思います。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

fixed

ページ全体を起点にして要素を固定することができます。
スクロールしても位置が変わらないため、ナビゲーションバーや固定バナーに適しています。
この記事のページでも、左上のロゴや右上のハンバーガーメニューの固定などに使用しています。

下の例では一般的なヘッダーをページ上部に固定しています。スクロールしてもヘッダーの位置が変わらないことがわかると思います。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

実装するときのポイントは大きく2つあり、
1つめはヘッダーをページ全体を起点に上・左・右から0pxの位置に配置をすることです。
ヘッダーを横幅いっぱいに表示させたい場合、左から0・右から0と左右の両方向からの距離を指定します。
（もしくはwidth:100%を設定しておき、左か右どちらかを指定するでもOKです）

また2つめは、ヘッダーの次のコンテンツの上にヘッダーの高さ分の余白を設けることです。
position:fixedを使ったことによってヘッダーを任意の場所に配置しているため、ヘッダーの高さは考慮されずその下のコンテンツがページの一番上に配置されることを防ぎます。
（あえてpositionで配置した要素と被せたい場合はその必要はありません）

sticky

通常は他の要素と一緒に動きますが、特定の位置に到達すると画面上で固定されます。
スクロールの位置に応じて動作が変化するため、動的なデザインに適しています。

下の例では、スクロールしてヘッダーが画面のトップに達したタイミングからその位置に固定されるようになっています。
画面に対して任意の位置に固定するのでpositon: fixedと少し似ていますが、固定するタイミングを制御できるところと、
position:stickyを命令した要素の高さはそのまま残り、その次のコンテンツの表示位置に影響を受けないところが異なる点です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

まとめ

今回紹介したpositionの値、また付随して使用するプロパティと値についてまとめておきます。

positionプロパティの値	命令の内容
static	初期値。位置の指定は行わない
relative	指定した要素の相対位置を決める
absolute	指定した要素の絶対位置を決める
fixed	指定した要素を画面の任意の場所に固定する
sticky	指定した要素が画面の特定の位置に到達したら固定する

付随するプロパティ	命令の内容
left	起点の左端からの距離を指定する
right	起点の右端からの距離を指定する
top	起点の上からの距離を指定する
bottom	起点の下からの距離を指定する
z-index	要素の重なり順を指定する 値の数値が大きいほど前面に表示される

positionは、要素の配置を柔軟にコントロールするために不可欠なCSSプロパティです。それぞれの値の特徴を理解して適切に使い分けることで、柔軟な表現が可能となります。
ぜひこの記事が参考になれば嬉しいです。

STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！