<div class="parent">
  <div class="child1">要素1</div>
  <div class="child2">要素2</div>
</div>

.parent {
  isolation: isolate;  /* 新しいスタッキングコンテキストを作成 */
  position: absolute;
}

.child1 {
  z-index: 1;
}

.child2 {
  z-index: 2;
}

/* ベース層 */
.card {
  isolation: isolate;
  z-index: 1;
}
.card__hover-effect {
  z-index: 1;
}

/* 中間層 */
.dropdown {
  isolation: isolate;
  z-index: 10;
}
.dropdown__menu {
  z-index: 1;
}

/* 最上層 */
.modal-container {
  isolation: isolate;
  z-index: 100;
}
.modal-overlay {
  z-index: 1;
}
.modal-content {
  z-index: 2;
}

/*
  複数のisolation: isolate;を持つ要素間のz-indexの管理する例
  10の倍数での段階分け
  通常のコンテンツ:1-9
  ドロップダウン:10-99
  モーダル:100-999
  これにより後から要素を追加する余地がある
*/

/* ベース層 */
.card {
  isolation: isolate;
  z-index: 1;
}
.card__hover-effect {
  z-index: 1;
}

/* 中間層 */
.dropdown {
  isolation: isolate;
  z-index: 10;
}
.dropdown__menu {
  z-index: 1;
}

/* 最上層 */
.modal-container {
  isolation: isolate;
  z-index: 100;
}
.modal-overlay {
  z-index: 1;
}
.modal-content {
  z-index: 2;
}

/*
  実装例
*/

/* Layer 1: Basic content */
.card {
  isolation: isolate;
  z-index: 1;
}

/* Layer 2: Interactive elements */
.tooltip {
  isolation: isolate;
  z-index: 5;
}

/* Layer 3: Navigation elements */
.dropdown {
  isolation: isolate;
  z-index: 10;
}

/* Layer 4: Overlay elements */
.modal-container {
  isolation: isolate;
  z-index: 100;
}

/* Layer 5: Critical notifications */
.notification-critical {
  isolation: isolate;
  z-index: 1000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.