absoluteとrelativeの利用方法と、中央寄せ・隣接・重ね合わせの具体例

HTML/CSS

absoluteとrelativeを利用して要素の位置を変更する方法

absoluteとrelativeの利用手順
  1. 移動対象の要素（子要素）に『position: absolute』を適用
  2. 移動基準の要素（親要素）に『position: relative』を適用
  3. 子要素（absolute）で位置を指定

要素の位置はleft, top, bottom, rightで指定します。insetを利用すると一括指定もできます。

たとえば、top: 10px、left: 50pxの場合、親要素から見て上から10px、左から50pxの位置に子要素が配置されます。
top: 10px、left: 50pxを指定した例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 10px;
  left: 50px;
}

See the Pen
absolute-example by Toshiharu Nishina (@nishina555)
on CodePen.

absoluteとrelativeを利用した配置例

重ね合わせ

ラベルやバッチの実装でよく利用する配置です。位置を0にすると重ね合わせになります。

たとえば左上に重ねる場合はtop: 0とleft: 0を指定します。top: 0とleft: 0はinset: 0 auto auto 0で一括指定できます。
top: 0、left: 0を指定した結果は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

See the Pen
absolute-left0-top0 by Toshiharu Nishina (@nishina555)
on CodePen.

隣接

位置を100%にすると隣接します。
たとえば親要素の右端と子要素の左端と合わせる場合はleft: 100%を指定します。
left: 100%を指定した結果は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  left: 100%;
}

See the Pen
absolute-left0-top0 by Toshiharu Nishina (@nishina555)
on CodePen.

左右中央よせ

方法1: marginプロパティを利用する

left: 0、right: 0、margin: autoで左右中央よせになります。
left: 0とright: 0はinset: auto 0で一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

See the Pen
absolute-x-center-with-margin by Toshiharu Nishina (@nishina555)
on CodePen.

方法2: transformプロパティを利用する

left: 50%とtransform: translateX(-50%)で左右中央よせになります。

left: 50%で要素の左端が左右中央よせになります。transform: translateX(-50%)で要素の半分の幅だけ左に移動させることで、左右中央よせを実現しています。

translateX(-50%)はtranslate(-50%, 0)でも指定可能です。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

See the Pen
absolute-x-center-with-transform by Toshiharu Nishina (@nishina555)
on CodePen.

上下中央よせ

方法1: marginプロパティを利用する

top: 0、bottom: 0、margin: autoで上下中央よせになります。
top: 0とbottom: 0はinset: 0 autoで一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

See the Pen
absolute-y-center-with-margin by Toshiharu Nishina (@nishina555)
on CodePen.

方法2: transformプロパティを利用する

top: 50%とtransform: translateY(-50%)で上下中央よせになります。

translateY(-50%)はtranslate(0, -50%)でも指定可能です。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See the Pen
absolute-y-center-with-transform by Toshiharu Nishina (@nishina555)
on CodePen.

上下左右中央よせ

方法1: marginプロパティを利用する

top: 0、right: 0、bottom: 0、left: 0、margin: autoで上下左右中央よせになります。top: 0、right: 0、bottom: 0、left: 0はinset: 0で一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

See the Pen
absolute-xy-center-with-margin by Toshiharu Nishina (@nishina555)
on CodePen.

方法2: transformプロパティを利用する

left: 50%、transform: translateX(-50%)、top: 50%、transform: translateY(-50%)で左右中央よせになります。

top: 50%とleft: 50%はinset: 50% auto auto 50%で一括指定できます。
translateX(-50%)とtranslateY(-50%)はtranslate(-50%, -50%)で一括指定できます。

具体例は以下の通りです。

<div class="parent">
  <div class="child">child(absolute)</div>
</div>


.parent {
  width: 300px;
  height: 300px;
  background-color: lightskyblue;
  position: relative;
}

.child {
  width: 120px;
  height: 120px;
  background: lightgreen;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

See the Pen
absolute-xy-center-with-transform by Toshiharu Nishina (@nishina555)
on CodePen.

まとめ

absoluteとrelativeを利用した配置方法まとめ
  • 重ね合わせる場合は位置を0にする
  • 隣接させる場合は位置を100%にする
  • 中央寄せにする場合は『対となる位置を0にする』+『margin autoを適用』あるいは、『位置を50%にする』+『transformを-50%にする』

さいごに

position: absoluteを適用すると要素の表示形式の特性が変化します。詳細は『position: absolute』を適用した要素の表示特性まとめで紹介しています。

また、今回紹介したabsoluteとrelativeを組み合わせたデザインは::before(::after)を利用するとよりシンプルに記述できます。詳細は【CSS】relative/absoluteの作成方法で紹介しています。::before(::after)の詳細は擬似要素before/afterの概要と具体例を参考にしてください。

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND