CSS positionの使い方｜5種類の違いと配置の基準を初心者向けに解説

CSSのpositionは、要素を通常の位置から動かしたり、画像の上へ重ねたり、スクロールしても画面内へ固定したりするためのプロパティです。

ただし、static、relative、absolute、fixed、stickyでは、位置の基準と通常の並びへの影響が異なります。この記事では、5つの値の違いを早見表で整理し、実際のコードと表示結果、効かないときの確認方法まで初心者向けに解説します。

CSSのpositionとは要素の配置方法を決めるプロパティ

positionは、HTML要素をどのような基準で配置するか決めるCSSプロパティです。基本形は次のように書きます。

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

position: relativeで配置方法を選び、topとleftで元の位置から動かす距離を指定しています。top: 20pxは上側から20px押すため下方向へ、left: 30pxは左側から30px押すため右方向へ動きます。

距離にはpxだけでなく、%、remなども使えます。なお、初期値のstaticでは、topなどを指定しても位置は変わりません。

CSSのセレクター、プロパティ、値の書き方から確認したい方は、次の記事を先に読むと理解しやすくなります。

positionの5種類を早見表で比較

positionでよく使う値は5種類です。違いを判断するときは、「何を基準にするか」と「元の場所が残るか」に注目してください。

上の図では、点線や枠線がそれぞれの基準を示しています。似て見える値でも、スクロールしたときの動きや、ほかの要素が空いた場所を詰めるかどうかが異なります。

position: staticは通常の並びに配置する

staticはpositionの初期値です。要素はHTMLに書かれた順番に従い、通常の文書の流れ（ノーマルフロー）の中へ配置されます。

.box {
  position: static;
  top: 20px;
}

この例ではtop: 20pxも書いていますが、staticには位置をずらす指定が適用されません。そのため、要素は元の場所から動きません。

普段はposition: staticをあえて書く必要はありません。メディアクエリなどで、別のposition指定を初期状態へ戻したい場合に使います。

position: relativeは元の位置を基準に動かす

relativeは、要素が本来置かれる位置を基準に移動します。要素を動かしても元の場所は確保されたままなので、後ろの要素が詰めて移動することはありません。

<div class="box box--blue">青い箱</div>
<div class="box box--orange">オレンジの箱</div>

.box {
  width: 160px;
  padding: 20px;
}

.box--blue {
  position: relative;
  top: 16px;
  left: 24px;
  background-color: #dbeafe;
}

.box--orange {
  background-color: #fed7aa;
}

青い箱は元の位置から下へ16px、右へ24px動きます。ただし元の場所は残るため、オレンジの箱は青い箱の移動前の場所を基準に並びます。移動量が大きいと、2つの要素が重なることもあります。

relativeは要素自身を少し動かす用途より、次に説明するabsoluteの基準を親要素へ作る用途でよく使われます。

position: absoluteは祖先要素を基準に重ねて配置する

absoluteを指定した要素は通常の文書の流れから外れます。元の場所が確保されなくなるため、ほかの要素と重ねて配置できます。

基準になるのは、positionがstatic以外に指定された最も近い祖先要素です。一般的には、基準にしたい親要素へposition: relativeを指定します。

変更前はラベルが画像の下に並ぶ

商品画像の右上へ「NEW」ラベルを置く例で確認します。まずHTMLだけを書くと、画像とラベルは通常の並びで表示されます。

<article class="product-card">
  <img src="shoes.jpg" alt="青いスニーカー">
  <span class="product-card__badge">NEW</span>
  <h2>軽量スニーカー</h2>
</article>

この状態では、ラベルは画像の上へ重ならず、画像の後ろに続く文字として表示されます。

親を基準にしてラベルを右上へ配置する

.product-card {
  position: relative;
  max-width: 480px;
}

.product-card img {
  display: block;
  width: 100%;
  height: auto;
}

.product-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  color: #fff;
  font-weight: 700;
  background-color: #e5484d;
  border-radius: 6px;
}

.product-cardへposition: relativeを指定したため、ラベルの基準はカードになります。ラベルはカードの上端と右端から12px離れた位置へ移動し、画像の右上へ重なります。

画像をwidth: 100%、height: autoにすると、カード幅に合わせて縦横比を保てます。画面幅が変わっても、ラベルと画像右上の位置関係を維持しやすくなります。

absoluteの基準、中央配置、ずれる原因をさらに詳しく確認したい場合は、次の記事で実例を使って解説しています。

position: fixedは画面の決まった位置へ固定する

fixedは、通常はブラウザの表示領域（ビューポート）を基準に要素を固定します。ページをスクロールしても同じ場所に残るため、ページ上部へ戻るボタンや固定メニューなどに使われます。

<a class="page-top" href="#top" aria-label="ページ上部へ戻る">↑</a>

.page-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: grid;
  width: 48px;
  height: 48px;
  color: #fff;
  background-color: #1d4ed8;
  border-radius: 50%;
  place-items: center;
}

ボタンは画面の右端と下端から24pxの場所に固定されます。fixedも通常の文書の流れから外れるため、本文を隠さない位置と大きさに調整してください。

スマートフォンでは、固定要素が画面を占める割合が大きくなります。重要な文章や操作ボタンへ重ならないか、小さい画面幅でも確認することが大切です。

position: stickyはスクロール途中から固定する

stickyは、通常の位置にある要素が指定した位置へ到達すると、スクロール領域の中で固定される配置方法です。見出し、目次、表のヘッダーなどを見える状態に保ちたいときに使います。

<section class="chapter">
  <h2 class="chapter__title">CSSの基礎</h2>
  <p>ここに長い本文が入ります。</p>
</section>

.chapter__title {
  position: sticky;
  top: 0;
  padding: 12px 16px;
  background-color: #fff;
  border-bottom: 1px solid #cbd5e1;
}

top: 0は、見出しの上端がスクロール領域の上端へ到達したら固定する指定です。親要素の範囲を抜けると固定も終わるため、fixedのようにページの最後まで残り続けるわけではありません。

stickyを使うときは、topなど固定を開始する位置を必ず指定します。また、祖先要素のoverflowや高さによって、想定より短い範囲で固定が終わることがあります。

relative・absolute・fixed・stickyの使い分け

どの値を選ぶか迷ったら、固定したい範囲から考えると判断しやすくなります。

• 元の場所を残したまま少し動かすならrelative
• カードや画像の中へ重ねるならabsolute
• 画面の同じ場所へ常に表示するならfixed
• 親要素の範囲内でスクロール途中から固定するならsticky

文章やカードを横並び・中央揃えにする目的なら、positionで座標を調整するよりFlexboxやGridのほうが画面幅の変化へ対応しやすい場合があります。

positionが効かない・ずれるときの原因

staticのままtopやleftを指定している

positionの初期値はstaticです。topやleftで動かしたい場合は、目的に合うrelative、absolute、fixed、stickyのいずれかを指定します。

absoluteの親要素が基準になっていない

親要素のpositionがstaticのままだと、absoluteはさらに外側にある位置指定済みの祖先要素を探します。基準にしたい親へposition: relativeを追加してください。

stickyにtopなどを指定していない

position: stickyだけでは、どの位置で固定するか決まりません。上端へ固定する場合はtop: 0、固定ヘッダーの下へ置く場合はヘッダーの高さに合わせたtopを指定します。

祖先要素のoverflowがstickyへ影響している

stickyは最も近いスクロール領域を基準にします。祖先要素へoverflow: hidden、auto、scrollなどが指定されていると、ページ全体ではなくその要素が基準になる場合があります。

z-indexを大きくしても前面に出ない

要素の重なり順はz-indexで調整できます。ただし、親要素が作る重なりのグループ（スタッキングコンテキスト）が異なると、子要素のz-indexだけを大きくしても前面に出ないことがあります。

まず対象要素と親要素のposition、z-index、transform、opacityを確認してください。数値を必要以上に大きくする前に、どの親要素の中で重なり順が決まっているかを調べることが重要です。

固定要素が本文や操作を隠している

fixedやstickyは、見えている本文へ重なる場合があります。固定ヘッダーの高さに合わせて本文へ余白を付け、キーボード操作時のフォーカスやページ内リンクの移動先が隠れないか確認しましょう。

positionを使うときの注意点

• left: 350pxのような固定値だけで画面全体の配置を作らない
• スマートフォン幅でも重なりやはみ出しがないか確認する
• 固定要素で本文、リンク、フォームを隠さない
• 装飾用の要素が操作を妨げる場合はpointer-eventsも確認する
• 単純な整列にはFlexboxやGridを優先する

positionは要素を重ねる場面で便利ですが、通常の並びから外す値もあります。親要素の幅や高さ、文章量が変わったときにも崩れないかを確認してください。

まとめ

CSSのpositionは、要素の配置方法と位置の基準を決めるプロパティです。staticは通常の並び、relativeは元の位置、absoluteは位置指定された祖先要素、fixedは通常は画面、stickyはスクロール領域を基準にします。

まずは「基準はどこか」「元の場所は残るか」「どの範囲で固定したいか」の3点を確認しましょう。画像上のラベルにはabsolute、画面固定にはfixed、範囲内の追従にはstickyというように、目的から選ぶと迷いにくくなります。