要素を任意の場所に配置するpositionのrelativeとabsolute」について解説します。

position: relative; は現在位置を基準に、相対位置を指定することができます。position: absolute; は親要素を基準に、絶対配置を指定することができます。position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです。

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

目次

 positonのrelativeとabsoluteの基本的な使い方

positionプロパティは要素の配置を指定するプロパティで、初期値はstaticです。relativeは要素の現在位置を基準に相対位置を指定し、absoluteは要素の絶対配置を指定することができます。

なお、staticはrelativeやabsoluteのように位置を指定することができません。

基本書式は次のようになります。

cssのコード

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

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

基本書式

positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します。4つ全てを使わずに適用することもできますが、位置を確定させるために、最低でも2つは適用するようにしましょう。

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

親要素にposition: relative; を適用し、子要素にposition: absolute; を適用すると、その子要素は、浮いたような状態になります。

まずは、親要素(parentクラス)にposition: relative; を適用し、子要素(boxクラス)には何も適用しない場合の配置を見てみましょう。

htmlのコード

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

cssのコード

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

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

.min-box {
  width: 100px;
  height: 100px;
  background: green;
}

出力結果

boxクラスの要素にposition: absolute; を適用すると、次のようになります。

cssのコード

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

出力結果

このように、boxクラスの要素にposition: absolute; を適用したことによって、適用した要素が浮いたような状態になります。これによって、position: absolute;を適用していないmin-boxクラス要素が上に詰まるようになります。

下記画像のようなイメージです。

relativeとabsoluteはセットで使う

position: relative; は、基本的に単体で使用することは少ないです。position: absolute; を使いたい場合に、その親要素に対してposition: relative; を適用してセットで使用します。

ここではrelativeとabsoluteをセットで使用する場合を簡単に解説します。

htmlのコード

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

cssのコード

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

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: absolute;
  top: 50px;
  left: 50px;
}

フレックスボックスの基本設定 display:flex

フレックスボックスを利用するためには、flexboxを利用する親要素に、display:flexを追加します。これにより、親要素がflexコンテナとなり、子要素がflexアイテムとなります。

出力結果

boxクラス要素にはposition: absolute; を適用し、その親要素(ここではparentクラスの要素)にposition: relative; を適用しています。親要素にposition: relative; を適用すると、position: absolute; を適用した子要素を動かす際の基準点が親要素になります。

下記画像のようなイメージです。

absoluteを単体で使う場合

例えば次のようなHTMLとCSSがあります。こちらは比較用のため、positionは適用していません。

htmlのコード

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

cssのコード

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

出力結果

現状では、positionプロパティを適用していないので、要素は画面左上に出力されています。

boxクラスの要素にposition: absolute; を適用してみましょう。親要素はないので、position: relative; の影響は受けていません。

cssのコード

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

出力結果

position: absolute; を適用し、top, left の2つのプロパティを同時に適用します。top, left の2つのプロパティによって、要素が画面の上から50px、leftは画面の左から50pxの位置に配置されました。

このように、position: absolute; は要素の絶対配置を指定することができます。

通常、position: absolute; を使用する場合は、その親要素にposition: relative; を適用して、セットで使用します。relativeを親要素に適用することで、その親要素がabsoluteで動かす要素の基準になります。

absolute単体で使用した場合で位置を指定すると、基準位置は下記のようになります。

  • top: 基準の上からの距離
  • bottom: 基準の下からの距離
  • left: 基準の左からの距離
  • right: 基準の右からの距離

absoluteを適用した要素の、親要素にposition: relative; を適用した場合で位置を指定すると、基準位置は下記のように親要素起点からの位置になります。

  • top: 親要素基準の上からの距離
  • bottom: 親要素基準の下からの距離
  • left: 親要素基準の左からの距離
  • right: 親要素基準の右からの距離

z-indexで重なり順を変更

positionプロパティはstaticを除き、要素の重なり順を指定するz-indexを適用することができます。

要素にz-indexを適用しない場合の、2つの要素の並びを確認してみましょう。

htmlのコード

<div class="box"></div>
  <div class="min-box"></div>

cssのコード

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: relative;
  top: 50px;
  left: 80px;
}

.min-box {
  width: 100px;
  height: 100px;
  background: red;
}

出力結果
 z-indexを指定しない場合は、boxクラス要素はposition: relative; を適用していないmin-boxクラス要素に対して、上に重なるように配置されます。

min-boxクラスの要素の裏側に、boxクラスの要素を配置する場合は次のようになります。

cssのコード

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

.min-box {
  width: 100px;
  height: 100px;
  background: red;
}

出力結果

z-indexプロパティは、数字が大きいほど前に配置され、数字が小さいほど後ろに配置されます。ここではboxクラス要素にz-index: -1;を指定しているので、min-boxクラス要素の裏側にboxクラス要素が配置されます。

次に、parentクラス要素の子要素である、boxクラス要素にz-index を適用した場合を見てみましょう。

例えば、boxクラスの要素をmin-boxクラスの要素の裏側に配置する場合は、次のようになります。

htnlのコード

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

cssのコード

.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; /*追記*/
}

出力結果

boxクラスの要素がmin-boxクラスの要素の裏側に配置されました。z-indexは、数字が大きいほど前に表示され、数字が小さいほど後ろに表示されます。

下記画像のようなイメージです。

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

positionのrelativeとabsoluteの使い所3選!

positionのrelativeとabsoluteを使う場面としては、次の3つがあります。

  • posiitonで上下左右中央寄せする
  • positionで要素を重ねる
  • positionとz-indexを組み合わせる

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

position で上下左右中央寄せする

positionのrelativeとabsoluteで要素を上下左右中央に配置することができます。中央寄せは見た目で綺麗な配置で、よく使われる配置なので覚えておきましょう。

htmlのコード

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

cssのコード

.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クラス要素の真ん中に配置されてしまうため、上下左右の中央揃えにはなりません。そのため、transformで縦横にboxクラス要素の-50%分動かすことで、boxクラス要素を中央に移動させます。

transform適用前後の状態は、下記画像のようなイメージです。

transform適用前

transform適用後
 

position で要素を重ねる

position を使って要素の上に要素を重ねたい場合には、relativeとabsoluteで要素を重ねることができます。
 

htmlのコード

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

cssのコード

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

出力結果

position を使わない場合、box__titleクラス要素は見た目上、boxクラス要素の中でbox__textクラス要素と縦並びになります。

box要素の枠線の上にbox__title要素を重ねたいときは、box__title要素にposition: absolute; 、その親要素にあたるbox要素にposition: relative; を適用し、top, leftで位置を調節します。

positionプロパティ適用前後の状態は、下記画像のようなイメージです。

position: absolute; 適用前

position: absolute; 適用後
 

position とz-indexを組み合わせる

position で疑似要素を表示させ、z-indexと組み合わせることで要素を重ねることができます。

z-indexは数字が小さいほど要素の後ろに配置されます。

htmlのコード

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

cssのコード

.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; を適用して画像の後ろに配置しています。

position のrelativeとabsoluteが効かないときの対処法

position プロパティが効かない場合は下記のような理由が考えられます。

  • 親要素にposition: relative; を適用していない
  • top, left, bottom, rightなど位置の指定を間違えている
  • 親要素にoverflow: hidden; を適用している
  • z-indexが負けている
  • 要素に高さやpaddingを指定していない

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

positionのabsoluteは、親要素や先祖要素にrelativeを適用していない場合、top, leftなどの位置を指定していても基準位置がページ全体となります。

この場合、配置したい要素(absoluteを適用した要素)の親要素に対してposition: relative; を適用し、子要素の基準位置を親要素に確定させてあげましょう。

top, left, bottom, rightなど位置の指定を間違えている親要素にpositon: relative; 、その子要素にposition: absolute; を適用した後、top, leftなどで要素の位置を指定します。その位置の指定を間違えて、画面外に要素が配置されている場合があります。

その場合は、例えばtop: 0;left: 0; などを適用して要素の位置を確認してみてください。要素の位置を確認できたら、検証ツールを使って位置を動かしていきましょう。

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

親要素にposition: relative;  とoverflow: hidden; をいっしょに適用している場合、その子要素が親要素の範囲外に配置されていると、overflow: hidden;によって子要素が非表示になってしまいます。

htmlのコード

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

cssのコード

.parent-hidden {
  position: relative;
  width: 500px;
  height: 500px;
  background: lightgreen;
  overflow: hidden;
}

.box {
  width: 100px;
  height: 100px;
  padding: 100px;
  background: orange;
  position: absolute;
  top: 0;
  left: 300px;
}

出力結果

この場合、overflow: hidden; を外すか、overflow: hidden; を適用した要素の外側の要素に、relativeとabsoluteをセットで適用してあげましょう。

htmlのコード

<div class="parent-hidden">
</div>

<!-- overflow: hidden;を適用した要素の外側に要素を移動する -->
<div class="parent">
  <div class="box"></div>
</div>

cssのコード

.parent-hidden {
  width: 500px;
  height: 500px;
  background: lightgreen;
  overflow: hidden;
}

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

.box {
  width: 100px;
  height: 100px;
  padding: 100px;
  background: orange;
  position: absolute;
  top: 0;
  left: 300px;
}

出力結果

z-indexが負けている

z-indexは数値が大きいほど前に表示されます。z-indexの数字の適用の仕方によっては、absoluteで配置したい要素が要素の裏側に隠れてしまうことがあります。

z-indexの数値をチェックしてみましょう。

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

relativeを適用した要素にheightやpaddingを適用していない状態で、配置したい要素にabsoluteを適用すると、親要素は高さがなくなります。

これは、親要素の高さが子要素の高さに依存していて、absoluteを適用することで子要素が親要素から独立してしまうためです。

例えば下記のような場合です。

htmlのコード

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

cssのコード

.parent-wrap {
  padding: 20px;
  background: lightgreen;
}

.parent {
  width: 500px;
  background: skyblue;
}

.box {
  width: 250px;
  height: 500px;
  background: orange;
}

出力結果

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

cssのコード

.parent-wrap {
  padding: 20px;
  background: lightgreen;
}

.parent {
  width: 500px;
  background: skyblue;
  position: relative; /*追記*/
}

.box {
  width: 250px;
  height: 500px;
  background: orange;
  position: absolute; /*追記*/
}

出力結果

boxクラス要素にabsoluteを適用したことによって、boxクラス要素が浮いたような状態になり、parent要素は高さがなくなりました。parent-wrap要素は、自身にpaddingが適用されているため、padding分の高さを保持しています。

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

チェックテスト

下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP