inset

position: fixed

<section class="modal">
  <h3>モーダルを表示しています</h3>
</section>
<div class="container"></div>


.container {
  background-color: #cccccc;
}

.modal {
  /* 問題1.上下左右中央に配置しよう  */
  inset: 0;
  margin: auto;
  position: fixed;

  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: fit-content;
  height: fit-content;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 50%);
}


.container {
  background-color: #cccccc;
}

.modal {
  /* 問題1.上下左右中央に配置しよう  */
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: fit-content;
  height: fit-content;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 50%);
}


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

position: absolute

right

left

bottom

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

position: relative

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

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

z-index

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

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

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

ヘッダーを固定しよう

position: sticky

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

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

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