z-index が効かない

1
2
3
4

/* z-indexを大きくしても前面に来ない */
.element {
  z-index: 9999;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* Bad: positionなしでz-indexは効かない */
.element {
  z-index: 100;
}

/* Good: positionを設定 */
.element {
  position: relative; /* または absolute, fixed, sticky */
  z-index: 100;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* 親要素がスタッキングコンテキストを形成する条件 */
.parent {
  /* 以下のいずれかでスタッキングコンテキストが作成される */
  position: relative;
  z-index: 1; /* auto以外の値 */

  /* または */
  opacity: 0.99; /* 1未満 */

  /* または */
  transform: translateZ(0);

  /* または */
  isolation: isolate;
}

/* 子のz-indexは親のスタッキングコンテキスト内でのみ有効 */
.child {
  position: relative;
  z-index: 9999; /* 親の外には出られない */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="parent-a" style="position: relative; z-index: 1;">
  <div class="child-a" style="position: relative; z-index: 100;">
    Child A
  </div>
</div>

<div class="parent-b" style="position: relative; z-index: 2;">
  <div class="child-b" style="position: relative; z-index: 1;">
    Child B (親のz-indexが高いのでChild Aより前面)
  </div>
</div>

1
2
3
4
5
6
7
8
9

/* 明示的にスタッキングコンテキストを作成 */
.container {
  isolation: isolate;
}

.modal {
  position: fixed;
  z-index: 100;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* モーダルを最前面に */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.modal-content {
  position: relative;
  z-index: 1001;
}

/* ドロップダウンメニュー */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  z-index: 100;
}

1
2
3
4
5
6
7
8
9

/* Flexbox/Gridでもz-indexが使える */
.flex-container {
  display: flex;
}

.flex-item {
  /* positionなしでもz-indexが効く */
  z-index: 1;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
  --z-toast: 500;
}

.dropdown { z-index: var(--z-dropdown); }
.modal { z-index: var(--z-modal); }
.toast { z-index: var(--z-toast); }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 要素のスタッキングコンテキストを確認
function getStackingContext(element) {
  const style = getComputedStyle(element);

  const creates = [
    style.position !== 'static' && style.zIndex !== 'auto',
    style.opacity !== '1',
    style.transform !== 'none',
    style.filter !== 'none',
    style.isolation === 'isolate',
    style.willChange === 'transform' || style.willChange === 'opacity'
  ];

  return {
    element: element.tagName,
    className: element.className,
    createsContext: creates.some(Boolean),
    zIndex: style.zIndex
  };
}