【CSS】要素の絶対位置を指定するposition: absolute;の使い方を分かりやすく解説

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

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

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

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

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

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

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

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

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

ZeroPlus Gateの詳細を見る

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

position: absolute; は、基準からの距離で位置を指定（絶対配置）するプロパティです。

単体でも使うことができますが、position: relative;を親要素に指定して、セットで使うことが多いです。親という「枠」の中で、子を自由に動かすイメージを持ってください。

絶対配置は、位置指定の際に基準が必要です。基準となる位置は、

• position: relative;を親要素に指定して、セットで使う場合は、position: relative;を指定した要素
• position: relative;を親要素に指定せず、position: absolute;単体で使う場合は、ページ全体

となります。

基準からの距離は、方向を示す4つのプロパティ（top, right, bottom, left）のうち2つを使って指定します。
たとえばleft: 20px;とtop: 20px;を指定する場合には「基準となる要素の左から20px、上から20pxの位置」に子要素が配置されます。

positon: relative;とセットで使用する

次のように親要素にposition: relative;、小要素にposition: absolute;を指定すると、position: absolute;を指定した小要素は、親要素（relativeが指定された要素）を基準に自由に配置することができます。

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

.container {
    /* レイアウト調整用 */
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.parent {
    position: relative;
    background-color: skyblue;
    width: 200px;
    height: 200px;
    z-index: 0;
}
.box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: orange;
}

かめるん先生

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

参考記事

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

absoluteを単体で使う場合、ページ全体が基準位置になる

親要素にposition: relative;を指定しない場合、つまりposition: 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の位置に配置されました。

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

ZeroPlus Gateの詳細を見る

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

【応用】position: absolute;の基準となる親要素を変える

以下のHTMLのように、parent要素にposition: relative; を適用し、parent要素の中にあるchild要素にposition: absolute; を適用します。

<div class="container">
   <div class="parent">
      <div class="child"></div>
   </div>
</div>

.parent {
    position: relative;
    width: 300px;
    height: 300px;
    border: 2px dashed orange;
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: red;
}
.container {
    /* レイアウト調整用 */
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

See the Pen 親要素と子要素 by ZeroPlus (@zeroplus-programming) on CodePen.

次にparent要素をさらにelement要素で囲い、position: relative; をparent要素ではなく、その上のelement要素に適用した場合を考えます。

コードは以下のようになります。

<div class="container">
   <div class="element">
       <div class="parent">
           <div class="child"></div>
       </div>
   </div>
</div>

.element {
    position: relative;
    border: 2px solid blue;
    padding: 50px;
}

.parent {
    width: 300px;
    height: 300px;
    border: 2px dashed orange;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: red;
}

.container {
    /* レイアウト調整用 */
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

See the Pen 祖先要素と子要素 by ZeroPlus (@zeroplus-programming) on CodePen.

祖先要素であるelement要素が親要素扱いとなり、child要素は直接の親要素を飛び越えてelement要素を基準として配置されました。

このように、position: absolute; を適用した子要素に対する親要素は、position: relative; が適用された要素によって変わります。意図しない位置に子要素が配置される場合、そもそもの親要素にposition: relative;が適用されているか確認しましょう。

なお、positionプロパティの初期値であるstaticは、absoluteのように位置を指定することができません。

【注意】position を指定すると通常配置から浮く

親要素にposition: relative; を適用し、子要素にposition: absolute; を適用すると、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プロパティは要素の位置を自由自在に操れて便利ですが、要素が浮くため、多用すると余白をたくさん取らなければいけなくなるので気をつけましょう！

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とセットで使わないと効きません！

完全無料で30日間、専任のメンターとコーディングを学べる

ZeroPlus Gateの詳細を見る

受講できる人数は毎日先着制！

【発展】基準位置とpadding、margin、borderとの関係

position: relative; とposition: absolute; を適用した要素がどこを基準に配置されるかは、padding, margin, borderの指定によって変わってきます。

position: relative; を適用した要素はborder（境界線）の内側が基準

position: relative; を適用した親要素にpadding、margin、borderを適用する場合、absoluteを適用した子要素の位置は、親要素のborderの内側が基準になります。

<div class="container">
   <div class="parent">
     <div class="child"></div>
   </div>
</div>

.parent {
    padding: 50px;
    margin: 50px;
    width: 500px;
    height: 500px;
    border: 20px dashed orange;
    position: relative;
}


.child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border: 4px solid red;
}


.container {
    /* レイアウト調整用 */
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

図のように、parent要素に適用したpaddingやmarginはchild要素に影響を受けませんが、border（境界線）が太ければ太いほどchild要素は内側へと移動していきます。

親要素parentに適用したpadding, margin, borderは、absoluteを適用した子要素childに対して以下のような影響を与えます。

• margin：子要素childに影響しない
• padiing：子要素childに影響しない
• border：子要素childの位置がborderの太さによって変わる

absoluteを適用した子要素はborderの外側が基準

absoluteを適用した子要素にpadding, margin, borderプロパティを適用した場合、小要素のborderの外側が基準になります。

<div class="container">
  <div class="parent">
      <div class="child"></div>
  </div>
</div>

.parent {
    padding: 50px;
    margin: 50px;
    width: 500px;
    height: 500px;
    border: 20px dashed orange;
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border: 4px solid red;
    padding: 40px;
    margin: 40px;
}
.container {
    /* レイアウト調整用 */
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

図のように、小要素に適用したmargin（余白）が大きいほど、child要素自身（borderを含む水色の要素）は内側へと移動していきます。

このように、absoluteを適用したchild要素の基準位置はmarginが基準になっています。

child要素に適用したpadding、margin、borderは、基準位置に対して以下のような影響があります。

• margin：子要素child自身のmarginによって基準位置が変わる
• padiing：基準位置に対して影響なし
• border：基準位置に対して影響なし

【実践】コピペで使える！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の擬似要素で擬似的に要素を追加しよう

【FAQ】position: absolute; が効かない原因と対処法

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の使い方解説！要素のはみ出し解決

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

コピー