.block {
  width: 150px;
  height: 150px;
  position: absolute;
}

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #333;
  margin: 0 auto;
  /* 問題1. 絶対配置の起点を指定しよう */
  position: relative;
}

.content1 {
  background-color: #0277bd;
  top: 0;
  right: 0;
}

.content2 {
  background-color: #ffff8d;
  top: 0;
  left: 0;
}

.content3 {
  background-color: #8d6e63;
  right: 0;
  bottom: 0;
}

.content4 {
  background-color: #008080;
  left: 0;
  bottom: 0;
}


position: relative

.block {
  width: 150px;
  height: 150px;
  position: absolute;
}

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #333;
  margin: 0 auto;
  /* 問題1. 絶対配置の起点を指定しよう */
}

.content1 {
  background-color: #0277bd;
  top: 0;
  right: 0;
}

.content2 {
  background-color: #ffff8d;
  top: 0;
  left: 0;
}

.content3 {
  background-color: #8d6e63;
  right: 0;
  bottom: 0;
}

.content4 {
  background-color: #008080;
  left: 0;
  bottom: 0;
}


絶対配置の起点を指定しよう

position: absolute

right

left

bottom

コンテンツの位置を絶対配置で指定しよう

コンテンツのラベルを表示しよう

inset

position: fixed

モーダルウインドウを実装しよう

z-index

コンテンツの重なり順を変更しよう

カードに画像を重ねるレイアウトを実装しよう

テキストの背面に画像を重ねるレイアウトを実装しよう

ヘッダーを固定しよう

position: sticky

スクロールの途中で要素を固定しよう

positionを使うことで、要素を自由な位置に配置したり、固定したりできます。
今回のレッスンで学んで、要素を自由自在に配置できるようになりましょう。

「positionを使いこなそう」レッスンの総復習クイズです。

絶対配置の起点を指定しよう

まずは必要なスキルを確認しましょう！