position: relative

position: absolute

top, bottom

right, left

left

bottom

.container {
  border: solid 4px #2f4f4f;
  margin: 40px auto;
  width: 300px;
  height: 300px;
  /* 問題1. 絶対配置の基準を指定 */
  /* この下に解答してください */
  position: relative;
}

.block {
  width: 146px;
  height: 146px;
  /* 問題2. コンテンツを絶対配置に指定 */
  /* この下に解答してください */
  position: absolute;
}

.content1 {
  background-color: #1e90ff;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
  top: 0;
  left: 0;
}

.content2 {
  background-color: #ff6347;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
  top: 0;
  right: 0;
}

.content3 {
  background-color: #ffd700;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
  right: 0;
  bottom: 0;
}

.content4 {
  background-color: #32cd32;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
  left: 0;
  bottom: 0;
}


.container {
  border: solid 4px #2f4f4f;
  margin: 40px auto;
  width: 300px;
  height: 300px;
  /* 問題1. 絶対配置の基準を指定 */
  /* この下に解答してください */
}

.block {
  width: 146px;
  height: 146px;
  /* 問題2. コンテンツを絶対配置に指定 */
  /* この下に解答してください */
}

.content1 {
  background-color: #1e90ff;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
}

.content2 {
  background-color: #ff6347;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
}

.content3 {
  background-color: #ffd700;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
}

.content4 {
  background-color: #32cd32;
  /* 問題3. ブロックの位置を変更 */
  /* この下に解答してください */
}


絶対配置の基準と指定

ラベルの位置を絶対配置に指定

position: sticky

position: fixed

要素の表示位置を固定

inset

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

モーダルウィンドウの実装

z-index

コンテンツの重なり順を指定

スタッキングコンテキスト

スタッキングコンテキストとz-index

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

テキストの背景に画像を重ねるレイアウトの実装

ヘッダーを固定

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

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

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