• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

パーツの横並びはpositionでも可能

スマホやタブレットはPCより画面幅が狭いため、例えばECサイトだと店舗ロゴの横にカートボタンなど、1つのライン上に複数のパーツを置きたい!となることがよくあるのではないでしょうか。

以下の画像のような複数の小さなパーツを横並びにする際CSSの「floatプロパティ」でも実現できますが、float解除のこともあり、細かく位置も指定できる「positionプロパティ」の方が有効ではないかと思います。

スマホ版ヘッダー

デモページはこちら。(※画像とは若干違います)

しかしこのpositionプロパティ、絶対位置とは?相対位置とは?実際どう違うの?と少々分かりづらいように感じます。私も入社後の課題でやっと理解できました。

そこで今回は、このプロパティの中で混同しやすい「relative」と「absolute」についてまとめたいと思います。

1.positionプロパティとは

要素の配置方法を指定します。値の種類は以下のとおりです。

static 配置指定なし。通常の位置に配置される。(初期値)
relative 相対位置。本来その要素が配置される場所を基準に配置される。
absolute 絶対位置。ウィンドウ、または親要素を基準に配置される。
fixed absoluteと同じく絶対位置。だが、スクロールしても位置が変わらない。(固定配置)

実際の上下左右の距離は「top」「bottom」「left」「right」プロパティを併用します。これらはpositionプロパティの値がstatic以外の時に有効となります。

またこの4つ全てを使う必要はなく、「top」だけ、「top」と「right」だけと必要なもののみ使い、配置された位置からの距離を指定します。

言葉だけではイメージがつきにくいと思いますので、以下より実際配置した時の画像と併せてご説明します。

2.“relative”と“absolute”の動きの違い

i)relative

【その1】
100px × 100pxの灰色のボックスの下に、relative指定した<div>を配置しました。

今回は上から0pxの距離を指定しています。

<div class="box">box</div>
<div class="relative">relative</div>
.box {
  width: 100px;
  line-height: 100px;
  background: #bbb;
  text-align: center;
}
.relative {
  position: relative;
  top: 0;
  /* 以下デザイン設定 */
  width: 500px;
  line-height: 50px;
  background: #f8b862;
  text-align: center;
}

relativeその1

relativeは「その要素が本来配置される位置」を基準にし、そこから指定した距離の場所に配置されます。

今回はその位置より上から0pxの距離のため、見た目は何も変わりません。

 
【その2a】
次はここから位置を動かしてみます。

【その1】の状態より、上から100px、左から100pxと指定します。すると元あった位置から指定した分移動しました。(ピンクの枠は空白部分です)

※HTMLは【その1】と同じ

.box {
  width: 100px;
  line-height: 100px;
  background: #bbb;
  text-align: center;
}
.relative {
  position: relative;
  top: 100px;
  left: 100px;
  /* 以下デザイン設定 */
  width: 500px;
  line-height: 50px;
  background: #f8b862;
  text-align: center;
}

relativeその2a

 
【その2b】
上下左右の位置の値には負の値も指定できます。

【その1】の状態より、上から-50px、左から50pxで指定すると灰色のボックスに被りました。

relativeその2b

灰色のボックスにもstatic以外を指定した上で「z-indexプロパティ」を併用すると、重なる順序の変更が可能です。

ですがこの「z-index」、どうやらIE6~7でバグがあるようですので注意が必要です。どういったバグかは以下のページをご覧ください。

IEのz-indexのバグを思い出す|Culture27(外部サイト)

 
【その3】
relativeは元の位置からの移動なので、少し移動させる場合など指定しやすく便利なのですが1つ注意点があります。

それは「要素Aを移動させた後も、元の場所にその要素Aの高さが残ってしまう」です。

その注意点を分かりやすくするために、【その2a】にボックスを1つ追加しました。

<div class="box">box</div>
<div class="relative">relative</div>
<div class="box">box</div> /* ←追加 */

※CSSは【その2a】と同じ

relativeその3

【その2a】の時とrelativeのボックスの位置は変わりませんが、2つの灰色のボックスの間に空間ができていますよね。

つまりこの空間が「要素Aの高さ」ということです。

 

ii )absolute

【その1】
100px × 100pxのボックスの下に、今度はabsoluteを指定した<div>を配置しました。

relativeの【その1】と同じく、上から0pxの距離を指定しています。

<div class="box">box</div>
<div class="absolute">absolute</div>
.box {
  width: 100px;
  line-height: 100px;
  background: #bbb;
  text-align: center;
}
.absolute {
  position: absolute;
  top: 0;
  /* 以下デザイン設定 */
  width: 500px;
  line-height: 50px;
  background: #f6bfbc;
  text-align: center;
}

absoluteその1

absoluteは「ウィンドウ、または親要素」を基準にし、そこからの距離の場所に配置されます。

今回の例ではウィンドウが基準になります。(親要素が基準になる場合は、後の【3.親要素にもpositionプロパティを設定】でご説明します)

ウィンドウ基準で上から0pxの距離となるため、absoluteのボックスはウィンドウの上辺にぴったり引っ付きます。

 
【その2】
次はここから位置を動かしてみます。

【その1】の状態より、上から100px、左から100pxで指定します。するとウィンドウを基準にして指定した分移動しました。

※HTMLは【その1】と同じ

.box {
  width: 100px;
  line-height: 100px;
  background: #bbb;
  text-align: center;
}
.absolute {
  position: absolute;
  top: 100px;
  left: 100px;
  /* 以下デザイン設定 */
  width: 500px;
  line-height: 50px;
  background: #f6bfbc;
  text-align: center;
}

absoluteその2

 
【その3】
relativeは本来の位置にその要素の高さが残りますが、absoluteでは高さが残りません。

こちらでも、【その2】の状態からボックスを1つ下に追加しました。

<div class="box">box</div>
<div class="absolute">absolute</div>
<div class="box">box</div> /* ←追加 */

※CSSは【その2】と同じ

absoluteその3

ご覧のように空間は残らず2つ目の灰色のボックスは上に詰め、1つ目のボックスのすぐ下に表示されました。

3.親要素にもpositionプロパティを指定

absoluteでウィンドウ基準ではなく親要素を基準にしたい時は、親要素にもstatic以外の値を設定する必要があります。

例で親ボックスにrelative、子要素にabsoluteを設定しました。比較上、親ボックスに30pxのmarginを付けています。

<div class="box">
  <div class="absolute">absolute</div>
</div>
.box {
  position: relative;
  /* 以下デザイン設定 */
  width: 300px;
  height: 300px;
  margin: 30px;
  background: #bbb;
  text-align: center;
}
.absolute {
  position: absolute;
  top: 100px;
  left: 100px;
  /* 以下デザイン設定 */
  width: 300px;
  line-height: 50px;
  background: #f6bfbc;
  text-align: center;
}

relative_absoluteその1

親要素にstatic以外を設定しなければ、以下の画像のようになります。

relative_absoluteその2

基準が親要素からウィンドウになるため、ピンク色のボックスの位置が変わります。

本来その要素が配置される場所に空白(移動させる要素の高さ)を残したくないけれど、基準点を画面の途中に置きたい時はこれが有効です。

終わりに

いかがでしたでしょうか。少しでも「relative」と「absolute」の違いをご理解いただければ幸いです。

冒頭で申し上げたようにfloatでもパーツを横並びにすることが可能ですが、positionも使うことで更にレイアウトの幅が広がるのではないかと思います。

他にもパーツを横並びにする方法に、「displayプロパティ」の「inline-block」と「table-cell」があります。そちらの記事も併せてご覧ください。

レスポンシブWebデザインで使える!inline-blockで高さを揃えよう
レスポンシブ化するなら知っておきたいtable-cellの使い方

原田