inset

position: fixed

margin

margin: 10px 20px 30px 40px;

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

<section class="modal">
  <h3 class="modal__title">モーダル</h3>
  <p class="modal__text">
  テキストテキストテキストテキスト</p>
  <button class="button">CLOSE</button>
</section>
<div class="container"></div>


.container {
  background-color: #cccccc;
}

.modal {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: fit-content;
  height: fit-content;
  text-align: center;
  box-shadow: 0 0 0 100vmax rgb(0, 0, 0, 0.3);
   /* 問題1.モーダルウィンドウを上下左右中央に配置 */
   /* この下に解答してください */
  position: fixed;
  inset: 0;
  margin: auto;
}

.modal__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.button {
  margin-top: 24px;
  padding: 8px 16px;
  border-radius: 10px;
  background-color: #7366c4;
  color: #fff;
}


.container {
  background-color: #cccccc;
}

.modal {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: fit-content;
  height: fit-content;
  text-align: center;
  box-shadow: 0 0 0 100vmax rgb(0, 0, 0, 0.3);
   /* 問題1.モーダルウィンドウを上下左右中央に配置 */
   /* この下に解答してください */
}

.modal__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.button {
  margin-top: 24px;
  padding: 8px 16px;
  border-radius: 10px;
  background-color: #7366c4;
  color: #fff;
}

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

position: relative

position: absolute

top, bottom

right, left

left

bottom

絶対配置の基準と指定

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

position: sticky

要素の表示位置を固定

z-index

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

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

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

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

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

ヘッダーを固定

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

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

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