こんにちは！デザイナーのasaです。
コーディングするとかなりの頻度で使用するプロパティ「position」。Webページのレイアウトを調整する際に重要な役割を果たし、ちょっと複雑なデザインでもpositionをうまく使えば大体再現できます。

そこで今回はpositionの種類と、使用時のポイントや注意点について詳しく解説します。

positionとは？

positionは、要素の配置方法を指定するためのCSSプロパティです。これにより、要素を親要素やビューポート内の任意の位置に配置することができます。ただ単に位置を調整するだけでなく、要素同士を重ねたり、固定したりと多用な使い方ができます。

positionは以下の5種類

top・bottom・left・rightとセットで使う

positionは基準を決めるプロパティで、具体的な位置はtop・bottom・left・rightで指定します。

static

staticはpositionの初期値で、特定の位置指定を行わない状態を指します。通常のhtmlの流れに従って配置されます。

特徴

top、leftなどを指定しても効かない

z-indexを指定しても効かない

使用例
初期値で全ての要素に適用されており、特に意識して使うことはありません。唯一使う場面としては、positionをリセットしたい時ぐらいではないでしょうか。

relative

relativeは、通常の配置位置を基準として、topやleftの指定に応じて位置を動かすことができます。あくまで元の位置を基準とするため、流れを崩さずに微調整するのに最適です。

特徴

top、leftなどで位置を指定できる

z-indexで重なり順を指定できる

position:absoluteの基準に指定できる

要素の高さは保たれる

使用例
2つ目のbox__itemにposition:relativeを指定して、上から20px、左から20px位置を移動します。

HTML
<div class="box">
  <div class="box__item"></div>
  <div class="box__item"></div>
</div>

css
.box__item:nth-child(2) {
  position: relative;
  top: 20px;
  left: 20px;

  // その他のcssは省略
}

absolute

absoluteは、親要素やページ全体を基準とした絶対位置として指定します。親要素がposition: relative;もしくはabsoluteの場合、その要素を基準に配置されますが、親要素にpositionが指定されていない場合、ビューポートを基準とします。

特徴

親要素を基準とした絶対位置で指定できる

top、leftなどで位置を指定できる

z-indexで重なり順を指定できる

要素の高さがなくなる

使用例
boxを親要素とするためposition: relative;を、子要素をposition: absolute;で右下に配置します。

HTML
<div class="box">
  親要素
  <span class="box__tag">アブソリュート</span>
</div>

css
.box {
  position: relative;
}
.box__tag {
  position: absolute;
  right: 0;
  bottom: 0;
}
// その他のcssは省略

absoluteのポイント

• 基準にしたい要素にposition:relative;を指定しましょう
• 親要素がposition: absolute;でも基準になります
• 親・祖先要素にposition:relative;またはposition: absolute;がなければウインドウが基準となります

fixed

fixedはビューポート（画面）を基準に位置が固定され、スクロールしても位置が変わりません。常に特定の位置に要素を表示し続けたい場合に使用します。

特徴

スクロールしても同じ位置に固定される

ウインドウ全体が基準となる

top、leftなどで位置を指定できる

z-indexで重なり順を指定できる

要素の高さがなくなる

使用例
ヘッダーの表示位置を上部に固定します。以下サンプル内をスクロールしてください↓

HTML
<header class="header">
  <p>固定されます</p>
</header>
<main class="main">
  <!-- 以下コンテンツが入ります -->
</main>

css
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.main {
  margin-top: 100px;
}
// その他のcssは省略

fixedのポイント

• ヘッダー等を固定する場合は、要素を一番上にしたいのでz-indexを大きめにとりましょう。
• fixedを使用すると幅が要素サイズになるので、ヘッダーメニューのような幅いっぱいに使いたい場合はwidth:100%;を指定しましょう。
• 要素の高さがなくなるので、直下のコンテンツと被らないよう上部にmarginかpaddingを指定しましょう。

sticky

stickyは、要素が特定の位置にスクロールするまでは通常の位置に表示され、特定の位置まで達すると固定される特性を持っています。覚えておくと便利で、このサイトのトップページでも使用しています。

特徴

指定した範囲内で位置を固定できる

top、leftなどで位置を指定できる

z-indexで重なり順を指定できる

要素の高さは保たれる

使用例
flexで要素を横並びに、左のタイトルをposition:sticky;で固定、右のコンテンツは通常にスクロールさせます。以下サンプル内をスクロールしてください↓

HTML
<!-- ↑↑上部コンテンツ↑↑ -->
<div class="box">
  <p class="box__title">sticky</p> 
  <div class="box__contents">
    <!-- コンテンツが入ります（普通にスクロール） -->
  </div>
</div>
<!-- ↓↓下部コンテンツ↓↓ -->

css
.box {
  display: flex;
}
.box__title {
  position: sticky;
  top: 0;
  // その他のcssは省略
}

stickyのポイント

• 兄弟要素がないと機能しない
• 親要素にじゅうぶんな高さがないと機能しない
• 親・祖先要素にoverflow: hidden;を指定していると機能しない^※

※overflow:clip;に変更するなどで対処可能

positionの注意点

positionが指定された要素は、重なりの順序（z-index）を利用できるようになります。特にabsoluteやfixedといったプロパティを使う場合、要素の重なり順を正しく指定しないと、思わぬ順序で表示されることがあります。
初期値のstaticではz-indexが効かないということも忘れてはいけません。z-indexを指定してもうまくいかない時は、まずpositionプロパティが指定されているかどうかチェックしましょう。

またレスポンシブデザインを設計する際、positionの使用が要素の位置やサイズに予想外の影響を与えることがあります。特にfixedやabsoluteはデバイスの幅や高さに対して相対的に動かないため、スマホでの表示に適さない場合があります。使用する場合はレイアウト崩れに注意しながらコーディングするようにしましょう。

まとめ

positionプロパティは、Webページのレイアウトやデザインを調整するための非常に重宝するプロパティです。各値の特徴や使い方を理解し、適切な位置指定を行うことで、効果的で使いやすいWebデザインを実現できます。

また弊社ではWEBやDTPの制作からマーケティングまでワンストップで対応していますので、お気軽にお問い合わせください。