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

コンテンツを重ねる配置

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

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

4つのpositionプロパティ

static

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

relative

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

absolute

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

fixed

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

位置を調整するプロパティ

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

top
基準の上からの距離

left
基準の左からの距離

right
基準の右からの距離

bottom
基準の下からの距離

左上に配置

absoluteを使った配置1
<div class="relative">
  <img src="images/bg.jpg">
  <img src="images/icon.jpg" class="absolute">
</div>
/* 親要素 */
.relative {
  position: relative;
}
/* 子要素 */
.absolute {
  position: absolute;
  top: 0;
  left: 0;
}

右下に配置

左下に配置する
/* 親要素 */
.relative {
  position: relative;
}
/* 子要素 */
.absolute {
  position: absolute;
  bottom: 0;
  right: 0;
}

左中央に設置

左中央に設置
/* 親要素 */
.relative {
  position: relative;
}
/* 子要素 */
.absolute {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

下中央から下半分はみ出した配置

下中央からさらに下半分はみ出した配置
/* 親要素 */
.relative {
  position: relative;
}
/* 子要素 */
.absolute {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
}

ど真ん中に配置

ど真ん中に配置
/* 親要素 */
.relative {
  position: relative;
}
/* 子要素 */
.absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

レッスン

以上を踏まえてレッスンをしてみましょう。以下からレッスン用のデータをダウンロードし、作成できたら完成ページをみて答え合わせしてください。

レッスンをダウンロード
https://smartpocke.com/sample/position/lesson_position.zip

完成ページ
https://smartpocke.com/sample/position/