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

positionを使った配置

公開日:2019年11月15日

Share on facebook
Share on twitter
Share on pocket

コンテンツを重ねる配置

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

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

4つのpositionプロパティ

static

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

relative

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

absolute

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

fixed

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

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

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

top
基準の上からの距離

left
基準の左からの距離

right
基準の右からの距離

bottom
基準の下からの距離

左上に配置

absoluteを使った配置1
<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%);
}

レッスン

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

More To Explore