z-index を使って「重なり順」を制御してみよう | HTML / CSS基礎

前のページでは、

overflow
スクロール
はみ出し制御

を学びました。

今回は、

z-index
重なり順
モーダルUI

などを使って、

「要素がどちらを前に表示するか」

を制御してみます

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

要素は重なることがある

例えば、

固定ヘッダー
メニュー
モーダル
ポップアップ

などでは、

要素が重なる

ことがあります。

まずはサンプルを書いてみよう

<div class="red"></div>

<div class="blue"></div>

CSS を書いてみよう

.red {
  width: 200px;
  height: 200px;

  background-color: #ef4444;
}

.blue {
  width: 200px;
  height: 200px;

  margin-top: -100px;
  margin-left: 100px;

  background-color: #3b82f6;
}

要素が重なる

すると、

赤と青が重なる

はずです。

z-index とは？

z-index は、

どちらを前に表示するか

を決めるCSSです。

z-index を追加してみよう

.blue {
  position: relative;

  z-index: 10;
}

なぜ position が必要なの？

ここが非常に重要です。

z-index は、

position が付いた要素

で使うことが多いです。

よくある組み合わせ

例えば、

position: relative;
z-index: 10;

や、

position: fixed;
z-index: 1000;

などがよく使われます。

数字が大きいほど前

例えば、

z-index: 1;

より、

z-index: 10;

のほうが前に表示されます。

イメージ

z-index が大きい
前面へ表示

です。

モーダルUIでよく使う

例えば、

画面を暗くして
中央にウィンドウ表示

するUIを、

モーダル

と呼びます。

モーダルのHTML

<div class="overlay"></div>

<div class="modal">
  モーダルです
</div>

CSS を書いてみよう

.overlay {
  position: fixed;

  inset: 0;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 10;
}

.modal {
  position: fixed;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  padding: 32px;

  background-color: white;

  border-radius: 12px;

  z-index: 20;
}

inset: 0 とは？

inset: 0;

は、

top right bottom left を全部 0

にする省略形です。

overlay の役割

背景を暗くすることで、

「今はモーダルに注目」

という演出になります。

なぜ modal の z-index を大きくするの？

例えば、

overlay → z-index: 10
modal → z-index: 20

にすることで、

modal が前面

になります。

transform: translate

今回、

transform: translate(-50%, -50%);

を書いています。

これは、

自分サイズの半分だけ戻す

ことで、

中央ぴったり

へ配置しています。

なぜ top: 50% だけではダメなの？

top: 50%;
left: 50%;

だけだと、

左上が中央

になります。

そのため、

translate(-50%, -50%)

で補正しています。

実際のWeb制作でも大量に使われている

z-index は、

モーダル
ハンバーガーメニュー
ヘッダー
ツールチップ
ドロップダウン

などで大量に使われています。

z-index が効かないこともある

初心者が非常につまずきやすいポイントですが、

z-index を上げても前に来ない

ことがあります。

これは、

親要素の影響

などが原因になることがあります。

最初は「数字が大きいほど前」でOK

z-index は奥が深いですが、

最初は、

数字が大きいほど前

くらいの理解で十分です

今回学んだこと

今回学んだこと：

z-index
重なり順
モーダル
inset
translate
overlay

などです。

次のページでは

次のページでは、

transition
opacity
transform

を組み合わせて、

「ふわっと表示されるUI」

を作っていきます