CSSプロパティ④

テキスト目次 > HTMLとCSSの基礎 >CSSプロパティ④

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

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

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

目次

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

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

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

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

基本書式

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

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

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

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

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

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

<div class="parent">
  <div class="box"></div>
  <div class="min-box"></div>
</div>
HTML
.parent {
  width: 500px;
  height: 500px;
  background: skyblue;
  position: relative;
}

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

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

出力結果

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

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

出力結果

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

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

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

relativeとabsoluteはセットで使う

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

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

<div class="parent">
  <div class="box"></div>
</div>
HTML
.parent {
  width: 500px;
  height: 500px;
  background: skyblue;
  position: relative;
}

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

出力結果

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

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

absoluteを単体で使う場合

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

<div class="box">box</div>
HTML
.box {
  width: 200px;
  height: 200px;
  background: orange;
}
CSS

出力結果

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

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

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

出力結果

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を適用しない場合の、２つの要素の並びを確認してみましょう。

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

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

出力結果

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

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

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

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

出力結果

z-indexプロパティは、数字が大きいほど前に配置され、数字が小さいほど後ろに配置されます。ここではboxクラス要素にz-index: -1;を指定しているので、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; /*追記*/
}
CSS

出力結果

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

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

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

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

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

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

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

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

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

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

<div class="parent">
  <div class="box"></div>
</div>
HTML
.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%);
}
CSS

出力結果

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

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

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

transform適用前

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

transform適用後

transform: translate();はとても難しいところですが、簡単にいうと「要素の移動」です！

transform: translate(x, y);で、x方向（横方向に）.boxのwidthの半分移動します！そして、y方向（縦方向に）.boxのheightの半分移動します！

position で要素を重ねる

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

<div class="box">
  <h2 class="box__title">見出し</h2>
  <p class="box__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
HTML
.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;
}
CSS

出力結果

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は数字が小さいほど要素の後ろに配置されます。

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

出力結果

画像に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; を適用し、子要素の基準位置を親要素に確定させてあげましょう。

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

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

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

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

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

<div class="parent-hidden">
  <div class="box"></div>
</div>
HTML
.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;
}
CSS

出力結果

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

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

<!-- overflow: hidden;を適用した要素の外側に要素を移動する -->
<div class="parent">
  <div class="box"></div>
</div>
HTML
.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;
}
CSS

出力結果

z-indexが負けている

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

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

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

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

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

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

<div class="parent-wrap">
  <div class="parent">
    <div class="box"></div>
  </div>
</div>
HTML
.parent-wrap {
  padding: 20px;
  background: lightgreen;
}

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

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

出力結果

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

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

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

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

出力結果

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

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

チェックテスト

チェックテストを確認する

要素の重なり順を指定することのできるcssプロパティをdiscordにて共有ください。

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP