css 絶対位置 relative absolute 違い 相対配置 positionプロパティとは/Webレイアウトの作り方/読み方

css 絶対位置 relative absolute 違い 相対配置 positionプロパティとは/Webレイアウトの作り方/読み方

Pocket

HTMLで記述(マークアップ)した要素をスタイルシート(CSS)でレイアウトしていく際、まず躓くのがpositionプロパティによる要素配置ではないでしょうか。

positionプロパティによる配置方法は大きく分けて2つのレイアウト違いがあり、
absolute(絶対配置)relative(相対配置)を適切に使い分けます。

読み方↓
絶対配置:absolute⇒アブソリュート
相対配置:relative⇒リラティブもしくはレラティブ

それではそれぞれの配置特性の違いを説明していきます。


目次


absolute(絶対配置)とは

absolute(絶対配置)はroot階層である画面ブラウザウインドウの四辺を基点にした距離を指定します。

  • top(上からの値)
  • right(右からの値)
  • bottom(下からの値)
  • reft(左からの値)

左上からの値を設定することが多いので下記のスタイルのようになります。

	position: absolute;
	top: 125px; left: 125px;

absolute(絶対配置)とは

<div class="parent_01"></div>

.parent_01 {
	position: absolute;
	top: 125px; left: 125px;


relative(相対配置)とは

relative(相対配置)について、
画面やブラウザウインドウの四辺を基点にした距離を指定することはabsolute(絶対配置)と違いはありませんが、兄弟要素など別要素が一緒に構成された状態で違いがでます。
relative(相対配置)とは

<div class="parent_01"></div>

.parent_01 {
	position: relative;
	top: 125px; left: 125px;

複数の要素の状態では影響を受け、相対配置ならではの表示がされます。
relative(相対配置)とは

<div class="parent_01"></div>
<div class="parent_02"></div>

.parent_01 {
	position: relative;
	top: 0px; left: 0px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

.parent_02 {
	position: relative;
	top: 125px; left: 125px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

図のように「要素A」と「要素B」は、同じ親要素内にある縦に並んだ兄弟要素であるため、「要素A」の直下である元々表示されるはずだった位置を基点として移動します。
それでは、absolute(絶対配置)の複数要素の状況を見てみましょう。


absolute(絶対配置)複数要素

absolute(絶対配置)複数要素

<div class="parent_01"></div>
<div class="parent_02"></div>
<div class="parent_01"></div>

.parent_01 {
	position: relative;
	top: 0px; left: 0px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

.parent_02 {
	position: absolute;
	top: 125px; left: 125px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

absolute(絶対配置)の複数要素の状況では、同じ親要素内にある縦に並んだ兄弟子要素であっても、
absolute(絶対配置)のスタイル指定を「要素B」に設定することで、「親要素」を基点とした絶対配置になります。
つまり、
「要素B」の直下に兄弟要素「要素C」がある場合、「要素B」は、absolute(絶対配置)により兄弟要素の影響を受けない座標を持つので、
「要素C」は上に詰まり「要素A」の直下に移動します。

それでは、この3つの要素の状態をrelative(相対配置)に変更するとどう変化するのでしょうか。


relative(相対配置)複数要素

relative(相対配置)複数要素

<div class="parent_01"></div>
<div class="parent_02"></div>
<div class="parent_01"></div>

.parent_01 {
	position: relative;
	top: 0px; left: 0px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

.parent_02 {
	position: relative;
	top: 125px; left: 125px;
	width: 125px;
	height: 125px;
	background: #33b7ba;
	}

「要素B」をabsolute(絶対配置)からrelative(相対配置)に変更すると、3つの要素の兄弟関係が発生します。

「要素B」は移動しますが、
相対配置のため、元々表示されるはずであった位置情報はそのままとなるので空白領域が確保されます。

したがって「要素C」は、「要素B」が元々表示されていた空白領域の下に表示されます。

それでは次に、実用度の高い「親要素」にrelative(相対配置)を指定するレイアウトを説明します。


親要素にrelative(相対配置)を指定

親要素にrelative(相対配置)を指定することは、複数要素で構成される実際のページに必要不可欠です。

まず、表示崩れの例として、親要素にabsolute(絶対配置)を指定してみます。
親要素にabsolute(絶対配置)を指定してしまうと、同じスタイルを参照する連続した兄弟要素すべてが重なってしまいます。

親要素にrelative(相対配置)を指定01

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

.parent_01 {
	position: absolute;
	top: 37.5px; left: 37.5px;
	width: 300px;
	height: 125px;
	margin: 0 0 32.5px 0;
	background: #33b7ba;
	}

.child_01 {
	position: absolute;
	top: 25px; left: 25px;
	width: 75px;
	height: 75px;
	background: #f9bf1e;
	}

HTMLにスタイルを適応させるクラス設定については、相対配置を活用して適切に共通スタイルを適応させていきます。

したがって、先ほどの表示崩れ例の親要素にrelative(相対配置)を指定すれば、重なりが解消され正しく表示されます。

親要素にrelative(相対配置)を指定02

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

  <div class="parent_01">
    <div class="child_01"></div>
  </div>

.parent_01 {
	position: relative;
	top: 37.5px; left: 37.5px;
	width: 300px;
	height: 125px;
	margin: 0 0 32.5px 0;
	background: #33b7ba;
	}

.child_01 {
	position: absolute;
	top: 25px; left: 25px;
	width: 75px;
	height: 75px;
	background: #f9bf1e;
	}


さいごに

要素単体表示では問題がでなくても、複数要素が組み込まれるページに組み込むと問題生じ、解決に時間を要します。

しかしながら、原因はいつも初歩的なので、基礎のおさらいを自身も心がけています。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket