CSS positionの使い方！値の意味や違いを解説！

2023年12月25日2024年7月30日

positionプロパティを使用すると、要素の位置を細かく配置することができ、デザインを整えやすくなります。

コーディングを実施する上で、必須なプロパティとなりますので、なんとか理解していきたいですね！

本記事ではpositionプロパティについて、使用できる値、使い方を解説していきます。

positionプロパティが良くわからない・・・、これから勉強するといった方のお役に立てれれば幸いです！

positionプロパティとは？

positionプロパティとは、要素を右に50px動かしたり、下に動かしたりと、位置を調整するプロパティです。

指定方法は、

セレクタ {
  position: 値;
}

となっております。

値は下記を使用します。

relative
absolute
fixed
sticky
static（初期値）

positionプロパティで使用できる値について

relative

relativeは、相対位置を決めるプロパティです。

相対位置といってもわかりにくいので、実際にコードを記載してどのようなものかご紹介いたします。

<div class="box-parent">
  <div class="box-child"></div>
</div>
<style>
  .box-parent {
    border: 1px solid #555;
    height: 300px;
    width: 500px;
    position: relative;

    top: 30px;
    left: 30px;
  }
</style>

上記のようにrelativeは、指定した要素の元々表示されていた場所から移動させることが可能です。

移動させる場合は、以下の値も合わせて使用します。

top（上から）
left（左から）
right（右から）
bottom（下から）

実際のところrelativeはabsoluteと合わせて使用されることが多く、absoluteと合わせて使用する場合は、relativeを起点となる親要素に指定し、実際に動かす子要素にabsoluteを指定します。

詳しくは事項をご確認ください。

absolute

absoluteは起点となる親要素からの絶対位置を指定するプロパティです。

絶対位置も言葉だけではわかりずらいため、下記をご覧ください。

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

<style>
  .box-parent {
    border: 1px solid #555;
    height: 300px;
    width: 500px;
    position: relative;
  }
  .box-parent .box-child {
    background-color: red;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
</style>

親要素（.box-parent）にposition: relative; を指定しています。この指定で、親要素（.box-parent）を起点にすることができました。

子要素（.box-child）にposition: absolute; を指定しています。親要素（.box-parent）にrelativeを指定しているため、親要素の基点からの位置を絶対位置で指定することが可能です。

まとめると要素の位置を指定したい場合は、動かしたい要素の親要素にposition: relative;を指定、実際に動かす要素にposition: absolute;を指定することで位置の制御が可能です。

注意点があり、position: absolute;で要素を動かした場合は、要素が浮いている状態になるため、下の要素が上に詰まってくるため、要素同士の重なりが発生します。

<div class="box-parent">
  <div class="box-child-1"></div>
  <div class="box-child-2"></div>
  <div class="box-child-3"></div>
</div>

<style>
  .box-parent {
    border: 1px solid #555;
    height: 300px;
    width: 500px;
    position: relative;
  }
  .box-parent .box-child-1 {
    background-color: red;
    height: 100px;
    width: 100px;
  }
  .box-parent .box-child-2 {
    background-color: green;
    height: 100px;
    width: 100px;
    position: absolute;

    top: 80px;

    left: 80px;
  }
  .box-parent .box-child-3 {
    background-color: blue;
    height: 100px;
    width: 100px;
  }
</style>

子要素（.box-child-2）に対してabsoluteを指定して動かしているため、浮いている状態になり、下の要素（.box-child-3）が上に詰まっております。

要素（.box-child-2）が要素（.box-child-1）と要素（.box-child-3）の上に重なっておりますが、absoluteを使用するとこのようなことが発生します。

これを制御するために必要なプロパティがz-indexプロパティです。

z-indexの値には数値が指定されますが、具体的な考え方は下の図をご参考ください。

デフォルトの値は0になっておりますが、特に指定しなかった場合は、HTMLの記載順で重なり合うようになっております。

そのため、先ほどのCSSの記載に、以下を追加すると

  .box-parent .box-child-2 {
    background-color: green;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: -1;
  }