HTMLとかCSSとかの基本はこれや

・後に記述してるやつほど表にくる

以下みたいにすると、試してないけど、たぶん画面は青くなるんちゃうかなって思うねん

<style>
  .a, .b {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .a {
    background-color: red;
  }
  .b {
    background-color: blue;
  }
</style>
<div class="a"></div>
<div class="b"></div>

ようするに、モーダル出したり、画面にカーテンみたいな効果かけたりしたいとき、上に乗りたい要素の後に記述すれば、そもそもz-indexは使う必要ないねん　z-index: 999 とか z-index: 9999 とかは不毛や

追記：jquery-ui とかで要素に自動的にz-indexが付与されてしまうので、仕方なくそれ以外の要素にもz-indexを付与するという悲しい事例を発見してしまった　z-index弾圧派としては、断固としてこれを拒否すべく、jqueryによるz-indexの付与後にz-indexをしばくという方法で回避した．