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をしばくという方法で回避した.