position: absolute

right

left

bottom

.block {
  width: 150px;
  height: 150px;
  /* 問題1. コンテンツを絶対配置にしよう */
  position: absolute;
}

.content1 {
  background-color: #0277bd;
  /* 問題2. ブロックの位置を変更しよう */
  top: 0;
  right: 0;
}

.content2 {
  background-color: #ffff8d;
  /* 問題2. ブロックの位置を変更しよう */
  top: 0;
  left: 0;
}

.content3 {
  background-color: #8d6e63;
  /* 問題2. ブロックの位置を変更しよう */
  right: 0;
  bottom: 0;
}

.content4 {
  background-color: #008080;
  /* 問題2. ブロックの位置を変更しよう */
  left: 0;
  bottom: 0;
}


.block {
  width: 150px;
  height: 150px;
  /* 問題1. コンテンツを絶対配置にしよう */
}

.content1 {
  background-color: #0277bd;
  /* 問題2. ブロックの位置を変更しよう */
}

.content2 {
  background-color: #ffff8d;
  /* 問題2. ブロックの位置を変更しよう */
}

.content3 {
  background-color: #8d6e63;
  /* 問題2. ブロックの位置を変更しよう */
}

.content4 {
  background-color: #008080;
  /* 問題2. ブロックの位置を変更しよう */
}


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

position: relative

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

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

inset

position: fixed

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

z-index

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

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

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

ヘッダーを固定しよう

position: sticky

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

CSSのpositionプロパティを活用し、要素を任意の位置に固定するテクニックを習得します。
モーダルウィンドウや画像の重ね合わせなど、実用的なケースを学びます。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。