【CSS】position: absolute;とposition: relative;をセットで使う方法を分かりやすく解説

この記事では、CSSプロパティのpositionに、relativeとabsoluteをセットで指定する方法や用途について、分かりやすく解説します。記事の後半では、配置の指定がうまく効かないときの原因と対処法についてもまとめています。

CSSで要素の位置を指定するうえでよく使用される方法ですので、いっしょに学習していきましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

 positon: absolute;の基本的な使い方

positionは要素の配置を指定するプロパティです。　要素の絶対配置を指定する値「absolute」は、要素の相対位置を指定する値「relative」とセットで使われ、基本の書式は以下のようになります。

基本書式

親要素セレクタ {
  position: relative;
}

子要素セレクタ {
  position: absolute;
  top: 値;
  right: 値;
  bottom: 値;
  left: 値;
}

このようにpositionと、top, right, bottom, leftなど方向を示す4つのプロパティを使って、要素の配置を指定します。

具体的にいうと、topとbottom のうちいずれか一つ、そしてrightとleftのうちいずれか一つ、計2つのプロパティを組み合わせて配置するのが基本です。たとえばleft: 20px;とtop: 20px;を指定する場合には「親要素を起点にして左から20px、上から20pxの位置」に子要素が配置されます。

かめるん先生

よく「left: 0;やtop: 0;」を省略してしまうことがありますが、要素に margin（外側の余白）が設定されている場合、思った位置に配置できないことがあります。値が 0 でも記述するようにしましょう！

参考記事【CSS】position: relative; の使用方法を初心者向けに分かりやすく解説

position を指定すると通常配置から浮く

親要素にposition: relative; を適用し、子要素にposition: absolute; を適用すると、子要素が浮くような状態になります。

まずは親要素（parent）にposition: relative; を適用し、子要素（box）にはposition: absolute;を適用しない場合の配置を見てみましょう。

See the Pen relative-absolute2 by ZeroPlus (@zeroplus-programming) on CodePen.

boxにposition: absolute; を適用すると、以下のようになります。

See the Pen relative-absokute3 by ZeroPlus (@zeroplus-programming) on CodePen.

position: absolute; を適用したboxが浮いたような状態になります。これによって、以下のようにboxの下にあったmin-boxが上に詰まるように配置されています。

かめるん先生

positionプロパティは要素の位置を自由自在に操れて便利ですが、要素が浮くため、多用すると余白をたくさん取らなければいけなくなるので気をつけましょう！

absoluteとrelativeはセットで使うのが基本

前述したとおりposition: absolute; とposition: relative; は基本的にセットで使用します。

See the Pen relative-absolute by ZeroPlus (@zeroplus-programming) on CodePen.

上記のコードでは、boxにはposition: absolute; を適用し、その親要素であるparentにposition: relative; を適用しています。

この場合、position: absolute; を適用した子要素（box）を動かす際の基準点が、親要素の左上になります。

かめるん先生

「position: relative;」は「position: absolute;」の親要素につけることが多いのですが、実は親要素以上の要素にもつけられます！

absoluteを単体で使う場合、画面が基準位置になる

absoluteを単体で使う場合、画面（ブラウザのビューポート）が基準になります。以下をご覧ください。

See the Pen position前 by ZeroPlus (@zeroplus-programming) on CodePen.

現状、positionを適用していないので、要素は画面左上に出力されています。ここでboxにposition: absolute; と、top, leftを適用してみましょう。

See the Pen absoluteのみ by ZeroPlus (@zeroplus-programming) on CodePen.

画面の左上を起点として、boxが上から50px、左から50pxの位置に配置されました。

absoluteを単体で使用する場合、要素は以下のように配置されます。

一方、親要素にrelativeを、子要素にabsoluteを指定する場合、子要素は以下のように配置されます。

z-indexで重なり順を変更できる

値に初期値のstaticが指定されている場合を除き、positionは要素の重なり順を指定するプロパティz-indexを適用できます。まずは要素にz-indexを適用する前の、2つの要素の並び方を確認しましょう。

See the Pen relative-並び順 by ZeroPlus (@zeroplus-programming) on CodePen.

position: abosolute;を適用しているboxは浮いたような状態になるため、positionを適用していないmin-boxの上に重なるように配置されます。

ここでz-indexを使えば、要素の重なり順を変更できます。

z-indexは、数値が大きい要素ほど上に配置させ、数値が小さいほど下に配置させられるプロパティだからです。もしmin-boxの下にboxを配置したい場合、boxにz-index: -1;を指定します。

See the Pen relative-並び順 by ZeroPlus (@zeroplus-programming) on CodePen.

min-boxの裏側にboxが配置されました。

次にparentの子要素であるboxクラスにz-index を適用する場合を見てみましょう。boxをmin-boxの裏側に配置するには、以下のように記述します。

.parent {
  width: 500px;
  height: 500px;
  background: skyblue;
  position: relative;
  z-index: 0; /*追記*/
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1; /*追記*/
}

See the Pen relative-absokute-z-index by ZeroPlus (@zeroplus-programming) on CodePen.

boxクラスの要素がmin-boxクラスの要素の裏側に配置されました。下の画像のようなイメージです。

positionを指定した要素は浮いたような状態になるため、要素同士が重なる場合はz-indexプロパティで重なり順を指定しましょう。

ここでz-index: 0;のparentより、z-index: -1;のboxが前に配置されている点を疑問に思うかもしれません。 親要素と子要素の両方にz-indexを指定する場合、子要素の値が親要素よりどんなに小さくても、子要素の方が前に配置されます。

かめるん先生

z-indexは要素の重なり順を指定するため、要素が重なる（浮いている）必要があります。要素を浮かせるpositionとセットで使わないと効きません！

position: absolute; の使いどころ3選

positionのrelativeとabsoluteをセットで指定する方法の使いどころには、主に次の3つがあります。

一つずつ紹介していきます。

上下左右中央寄せする

relativeとabsoluteをセットで使って、要素を上下左右中央に配置できます。

See the Pen positionで中央寄せ by ZeroPlus (@zeroplus-programming) on CodePen.

コードの全体像を、以下でご確認ください。

<div class="parent">
  <div class="box"></div>
</div>

.parent {
  width: 500px;
  height: 500px;
  background: skyblue;
  position: relative;
}


.box {
  width: 250px;
  height: 250px;
  background: orange;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

まずposition: absolute; が適用されているboxにtop: 50%; left: 50%; を指定します。これにより親要素であるparentの左上を起点として上と左それぞれ50％の位置にboxクラス要素が配置されます。

しかし、このままではboxの左上がparentの真ん中に配置されてしまうため、上下左右の中央揃えにはなっていません。

かめるん先生

一見、top: 50%; left: 50%; で中央寄せになるかと思いますが、topから半分（50%）、leftから半分（50%）移動するので、それだけだとこんな感じになってしまうんですね〜。

ここでCSSプロパティのtransformを使って、縦横にboxを-50%分動かすことで、上下中央に配置できます。

transform適用後

かめるん先生

transform: translate(x, y);を指定するとx方向（横方向）にboxのwidthの半分の位置に移動させ、y方向（縦方向）にboxのheightの半分の位置に移動させられます！

参考記事positionとtransformで要素を上下左右中央寄せしよう

要素と要素を重ねる

relativeとabsoluteを使って、要素と要素を重ねられます。

<div class="box">
  <h2 class="box__title">見出し</h2>
  <p class="box__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

.box {
  margin-top: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  border: 1px solid orange;
  border-radius: 4px;
  padding: 20px 10px;
}

.box__title {
  position: absolute;
  top: -30px;
  left: -1px;
  background: orange;
  padding: 10px 11px;
  font-size: 14px;
  display: block;
  width: 100%;
  max-width: 100px;
}

.box__text {
  font-size: 12px;
}

See the Pen positionで重ねる by ZeroPlus (@zeroplus-programming) on CodePen.

position を使わない場合、親要素であるboxの中でbox__titleはbox__textと縦並びに配置されます。

boxの枠線の上にbox__titleを重ねるにはbox__titleにposition: absolute; 、boxにposition: relative; を適用し、top, leftで位置を調節します。

要素と擬似要素を重ねる

要素にrelative、疑似要素にabsoluteを指定して要素と擬似要素を重ねられます。

<section class="section">
  <div class="inner">
    <div class="box__imgbox">
      <img src="dummy.png" alt="">
    </div>
    <div class="box__textbox">
      <p class="box__text">テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
  </div>
</section>

.section {
  padding-top: 20px;
  padding-bottom: 20px;
}

.inner {
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  align-items: flex-start;
}


.box__imgbox {
  position: relative;
  width: 100%;
  margin-right: 20px;
  max-width: 260px;
}


.box__imgbox::before {
  position: absolute;
  content: "";
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background: orange;
  z-index: -1;
}

.box__imgbox img{
  width: 100%;
  height: 100%;
  display: block;
}

.box__textbox {
  width: 100%;
}

.box__text {
  font-size: 12px;
}

出力結果

上の例では画像にposition: relative; を適用し、疑似要素（オレンジのボックス）にz-index: -1; を適用して、背面に重ねて配置しています。

参考記事

CSSの擬似要素で擬似的に要素を追加しよう

positionが効かない原因と対処法

position: relative;とposition: absolute;を使ってみたものの、思った位置に要素が配置されなかったり、要素が見えなくなってしまうケースがあります。

思い通りに効かない原因としては、以下の状態が考えられます。

次からは、それぞれの状態について対処法を解説します。

親要素にposition: relative; を適用していない

親要素や先祖要素にrelativeを適用しない場合、position: absolute;を指定している子要素の基準位置は画面（ビューポート）です。

この場合、親要素に対しposition: relative; を適用して、子要素の基準位置を、親要素の左上に指定しましょう。

かめるん先生

これは本当によくあるミスです！「positionを使って要素が消えた」となったら、上の方を見てみると大体あるので、探してみてください！

位置の指定を間違えている

親要素にpositon: relative; 、子要素にposition: absolute; を適用してから、top, leftなどで要素の位置を指定するのが基本の使い方です。しかし、位置の指定を間違えて、要素が思わぬ場所に配置されるケースがあります。

この場合、ひとまずtop: 0;、left: 0; を適用させ要素の基準位置を確認してみましょう。要素の基準位置を確認できたら、検証ツールを使って位置をシミュレーションしながら、任意の位置の数値を取得するとスムーズです。

参考記事検証ツールの使い方を解説！HTMLとCSSを確認する方法

親要素にoverflow: hidden; を適用している

親要素にposition: relative;  とoverflow: hidden; を一緒に適用している場合には注意が必要です。

子要素が親要素の範囲外に配置されていると、overflow: hidden;によって子要素が非表示になってしまいます。

See the Pen positionとoverflow: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.

同じレイアウトであってもoverflow: hidden;が親要素に指定されているかいないかで、以下のように異なります。

この場合、子要素を表示させるための簡単な方法は、以下のように親要素のoverflow: hidden; を外してしまうことです。

See the Pen positionとoverflow: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.

一方、parentのoverflow: hidden; を外さずにboxを表示させる場合には、以下のようにparentの外側にもう一つラップ要素を作り、その要素にposition: relative; を適用します。

See the Pen positionとoverflow: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.

参考記事【CSS】overflowの使い方解説！要素のはみ出し解決

無料であなた専属のメンターとコーディングを学ぶ30日間

ZeroPlus Gateの詳細を見る

費用は一切かからないサービスです

z-indexが負けている

position のrelativeとabsoluteが効かない場合には、z-indexの数値をチェックしてみましょう。z-indexは数値が大きいほど前に表示されます。

重なっている要素のz-indexが大きく、表示させたい要素のz-indexの値が負けて、隠れてしまっている場合があります。

要素に高さやpaddingを指定していない

relativeを適用した親要素にheightやpaddingを指定していない状態で、配置したい子要素にabsoluteを適用すると、親要素は高さがなくなります。absoluteを適用することで子要素が、親要素から独立してしまうためです。

たとえば以下のような場合です。

See the Pen 親要素にheightやpaddinの指定 by ZeroPlus (@zeroplus-programming) on CodePen.

parentはheightを適用しておらず、子要素のboxによって高さを保持している状態です。ここでparentにposition: relative;、boxにposition: absolute;を適用すると次のようになります。

See the Pen 親要素にheightやpaddinの指定2 by ZeroPlus (@zeroplus-programming) on CodePen.

boxにabsoluteを適用したことによって浮いたような状態になり、parentは高さが縮んでしまいました。正確に言えばparent-wrapにpadding分の高さのみが保持された状態で表示されています。

このような場合、heightやpaddingを適用して親要素に高さを持たせましょう。

See the Pen 親要素にheightやpaddinの指定2 by ZeroPlus (@zeroplus-programming) on CodePen.

まとめ：relativeとabsoluteはセットで使うと、子要素の配置を自由に指定できる

position: relative;と親要素に、position: absolute;を子要素に設定することにより、親要素の左上を起点として任意の位置に子要素を配置できます。

基本書式

親要素セレクタ {
  position: relative;
}

子要素セレクタ {
  position: absolute;
  top: 値;
  right: 値;
  bottom: 値;
  left: 値;
}

topとbottom のうちいずれか一つ、そしてrightとleftのうちいずれか一つ、計2つのプロパティを組み合わせて、子要素を任意の位置に配置する使い方が基本です。

使いこなせば自由なレイアウトを作れますが、absoluteを指定した子要素は浮いた状態になり、下にある要素が上へ詰まってくるため、レイアウトのコントロールがやや難しい面があります。

absoluteとrelativeは使いどころを理解して使いましょう。

使用用途

position: relativeと;position: absolute;をセットで使う手法の主な用途は、以下のとおりです。

このように用途を明確につかみ、使い所を絞っていくとコーディングがスムーズにすすめられます。試してみてくださいね！

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー