positionでコンテンツを配置する方法 [レッスン付]

コンテンツを重ねる配置

absolute と relative を組み合わせて使うことで、コンテンツを重ねる配置ができます。

ここでは画像の上に画像を重ねる配置を例に紹介していきます。

初期値。設定していない場合はこれになっています。位置を指定しても変化しません。

現在の位置から相対的に位置を動かせます。

親要素から絶対的な位置で子要素を動かせます。absoluteはrelativeと一緒に使います。

画面の特定の位置から動かないよう固定することができます。スクロールさせたくない時などに使えます。

以下のプロパティはpositionプロパティ(static除く)と一緒に使います。

top
基準の上からの距離

left
基準の左からの距離

right
基準の右からの距離

bottom
基準の下からの距離

<div class="oya">
  <img src="images/bg.jpg">
  <img src="images/icon.jpg" class="ko">
</div>

/* 親要素 */
.oya {
  position: relative;
}
/* 子要素 */
.ko {
  position: absolute;
  top: 0;
  left: 0;
}

/* 親要素 */
.oya {
  position: relative;
}
/* 子要素 */
.ko {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 親要素 */
.oya {
  position: relative;
}
/* 子要素 */
.ko {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 親要素 */
.oya {
  position: relative;
}
/* 子要素 */
.ko {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
}

/* 親要素 */
.oya {
  position: relative;
}
/* 子要素 */
.ko {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上を踏まえてレッスンをしてみましょう。以下のレッスン見本からレッスン内容を確認し、レッスンをダウンロードして見本通りにできるか挑戦してみてください。