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

.content1 {
  background-color: #0277bd;
  top: 0;
  left: 0;
  /* 問題1. ブロックの重なり順を逆にしよう */
  z-index: 1;
}

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

.content3 {
  background-color: #8d6e63;
  top: 80px;
  left: 80px;
  /* 問題1. ブロックの重なり順を逆にしよう */
  z-index: -1;
}


z-index

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

.content1 {
  background-color: #0277bd;
  top: 0;
  left: 0;
  /* 問題1. ブロックの重なり順を逆にしよう */
}

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

.content3 {
  background-color: #8d6e63;
  top: 80px;
  left: 80px;
  /* 問題1. ブロックの重なり順を逆にしよう */
}


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

position: absolute

right

left

bottom

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

position: relative

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

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

inset

position: fixed

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

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

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

ヘッダーを固定しよう

position: sticky

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

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

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

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

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