position: absoluteの使い方｜基準位置と効かない原因を初心者向けに解説

position: absoluteは、要素を通常の並びから取り出し、基準となる範囲の上下左右から位置を指定するCSSです。画像の右上にラベルを重ねる、カード内にアイコンを置く、といった場面で使います。

ただし、基準となる要素を理解せずに使うと「親要素からはみ出す」「画面サイズを変えるとずれる」という問題が起こります。この記事では、初心者向けに図とサンプルコードを使い、基本からトラブルの直し方まで解説します。

position: absoluteとは

position: absoluteを指定した要素は、通常の文書の流れ（上から下へ要素が並ぶ仕組み）から外れます。そのため、ほかの要素がある場所にも重ねて配置できます。

.child {
  position: absolute;
  top: 20px;
  right: 20px;
}

top: 20pxは基準の上端から20px、right: 20pxは右端から20px離す指定です。位置はtop、right、bottom、leftで調整できます。

CSSの基本的な書き方から確認したい方は、次の記事を先に読むと理解しやすくなります。

absoluteの基準は直近の位置指定された祖先要素

position: absoluteを理解するうえで最も大切なのが「どこを基準にするか」です。基準になるのは、単純な親要素ではなく、positionがstatic以外に指定された最も近い祖先要素です。

通常は、基準にしたい親要素へposition: relativeを指定します。relativeだけなら親要素は元の位置に残るため、レイアウトを大きく変えずに基準を作れます。

基準になる祖先要素がない場合は、最初の包含ブロックが基準になります。一般的なWebページでは画面を基準に動いたように見えるため、意図しない場所へ移動しやすくなります。

画像の右上にラベルを重ねる手順

実際に、商品カードの画像へ「NEW」ラベルを重ねてみましょう。変更前の状態からHTMLとCSSを順番に追加します。

変更前のHTMLを書く

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

CSSを指定していないため、画像、ラベル、見出しがHTMLに書いた順番で縦に並びます。ラベルはまだ画像の上に重なっていません。

親要素を配置の基準にする

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

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

.product-cardへposition: relativeを追加し、ラベルの基準にします。画像は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;
}

ラベルは通常の並びから外れ、カードの上端と右端から12pxの位置へ移動します。画像とラベルが同じカード内にあるため、画面幅が変わっても右上の関係を保ちやすい書き方です。

変更後の完成コードを確認する

<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;
}

position: absoluteで中央配置する方法

要素の大きさが決まっていない場合は、top: 50%とleft: 50%だけでは中央に揃いません。要素自身の幅と高さの半分をtransformで戻します。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

topとleftの50%は、子要素の左上角を親要素の中央へ移動する指定です。translate(-50%, -50%)は子要素自身の大きさを基準に半分戻すため、中央が一致します。

単純な横並びや上下中央揃えなら、absoluteよりFlexboxやGridのほうが保守しやすい場合があります。目的に合わせて使い分けてください。

position: absoluteが効かない・ずれる原因

topやleftなどを指定していない

position: absoluteだけを指定しても、元の位置から動かないことがあります。移動させる場合は、topやrightなどの位置指定を組み合わせます。

基準にしたい親要素へpositionを指定していない

子要素がカードの外へ飛び出す場合は、基準にしたい親要素のpositionを確認します。多くの場合、親要素へposition: relativeを追加すると意図した基準になります。

親要素の高さがなくなったように見える

absoluteを指定した子要素は通常の流れから外れるため、その子要素だけでは親の高さを押し広げません。親の高さを内容に合わせたい箇所では、主要なコンテンツまでabsoluteにしないようにします。

ほかの要素の後ろに隠れる

要素が重なったときの前後関係はz-indexで調整できます。ただし、祖先要素が作る重なりのまとまり（スタッキングコンテキスト）の影響を受けるため、数値を大きくするだけで解決しない場合があります。

absoluteを使うときの注意点

• 文章や主要なレイアウト全体を固定座標で組まない
• スマートフォン幅でも重なりやはみ出しがないか確認する
• 拡大表示や文字サイズ変更でも内容が読めるようにする
• 装飾目的の要素がリンクやボタンを覆わないようにする

absoluteは「要素を重ねる」用途に向いています。一方、ページ全体の段組みや複数要素の整列には、FlexboxやGridを使うほうが画面幅の変化へ対応しやすくなります。

positionのほかの値も比較したい方は、次の記事でstatic、relative、fixed、stickyとの違いを確認できます。

まとめ

position: absoluteは、要素を通常の流れから外し、基準となる範囲の上下左右から配置する指定です。画像上のラベルやカード内のアイコンなど、要素を重ねたい場面で役立ちます。

まずは基準にしたい親要素へposition: relative、動かしたい子要素へposition: absoluteを指定しましょう。そのうえでtopやrightを調整すると、意図した位置へ配置できます。