負のz-index値の効果的な使用法

負のz-index値

負のz-index値は要素を通常のドキュメントフローの背後に配置します。正の値よりは一般的ではありませんが、背景効果、デコレーション、レイヤリングトリックのためのエレガントなCSS専用ソリューションを可能にします。

負のz-indexが機能する条件

負のz-indexは以下の場合にのみ機能します：

1. 要素のpositionがstatic以外に設定されている
2. 親がスタッキングコンテキストを作成していない

/* 動作する — 親にスタッキングコンテキストがない */
.parent {
  position: relative;
  /* z-indexなし、transformなし、opacity < 1なし */
}

.parent::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* この疑似要素は.parentのコンテンツの背後に表示される */
}

使用例1：背景デコレーション

.hero-section {
  position: relative;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 1rem;
}

.hero-section::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -2;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  border-radius: 1rem;
  filter: blur(8px);
}

負の値を含むz-indexスケール

:root {
  --z-behind: -1;
  --z-deep-behind: -10;
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 1000;
}

落とし穴：親のスタッキングコンテキスト

/* 壊れる — 親がスタッキングコンテキストを作成 */
.parent {
  position: relative;
  z-index: 1; /* スタッキングコンテキストを作成！ */
}

.parent::before {
  z-index: -1;
  /* 親のコンテンツの後ろだが親の背景の上に表示される */
  /* 親自体の背後に行くことはできない */
}