<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.