z-index无效有多种原因。z-index默认值是0，都是0的时候，按照dom元素渲染顺序决定优先级。

1.和position同时使用

z-index搭配position非static的值才生效，如relative、absolute、fixed、sticky。这是最常见的

2.Dom元素层级的问题

如果一个子节点有高优先级（zindex999），而其父节点优先级（zindex1）比要遮盖住的兄弟节点（zindex2）要低，则子节点不生效。也就是说，zindex最好是比对同层级的节点的优先级，想遮盖住父节点外的节点，则要同时管理父节点的zindex。
所以对于优先级高的组件如dialog、toaster一般在最外层添加节点。

  1. <div class="a1" style="width: 300px;height: 300px;">
  2.   a1 red
  3.   <div class="b1">b1 blue</div>
  4. </div>
  5. <div class="a3">a3 yellow</div>
  7. <style type="text/css">
  8.   .a1, .a3 {
  9.     width: 100px;
  10.     height: 100px;
  11.   }
  12.   .a1 {
  13.     background-color: red;
  14.     position: relative;
  15.     z-index: 1;
  16.   }
  17.   .a3 {
  18.     background-color: yellow;
  19.     position: relative;
  20.     top: -400px;
  21.     z-index: 2;
  22.   }
  23.   .b1 {
  24.     width: 100px;
  25.     height: 100px;
  26.     background-color: blue;
  27.     position: relative;
  28.     z-index: 999;
  29.   }
  30. </style>