作りたい画面↓

青いブロックが一番上に来るようにしたい。赤いブロックは下に来るよう配置したい

現状

赤いブロックが一番上になってしまっている

なぜか？

親要素にz-indexをつけている場合、一番上にしたい要素にいくら大きい数字（z-index:100とか）をつけようとも、親要素のz-indexを超えることはできないから。

どういうこと？

例）以下のような図形を使って説明します（分かりやすいよう今回の説明に必要なコード以外は省略）。

このような図形があったとき、

<section class="parent">
      parent
  
   <div class="blue-box">
     child
   </div>

</section>


<section class="red-box">
    red-box
</section>

以下のように、赤いブロックを一番下にしようと思います。

z-indexだけで重なりの順序を調整しようとすると・・・

（※全ての要素にpositionプロパティが指定してあると生じる問題のため、
　　全ブロックにpositionプロパティをつけています）
　（下記のcssコード参照）

.parent{
  z-index: 1;
　position: relative;
}

.child{
  z-index: 100;
　position: relative;
}

.red-box{
  z-index: 2;
　position: relative;
}

次のように、赤いブロックが一番上にきてしまう

この時、childブロックの”z-index: 100;”はparentブロックの”z-index: 1;”に制限され”z-index: 1;”として扱われる。

したがって、”z-index: 2;”のred-boxブロックが一番上に来てしまう

そこで、親要素のparentブロックのz-indexを上げてみます。以下参照

.parent{
  z-index: 3;
　position: relative;
}

.child{
  z-index: 100;
　position: relative;
}

.red-box{
  z-index: 2;
　position: relative;
}

red-boxブロックが一番下に来ました。

重なり順序は、奥が深くて難しいですね。少しづつ学んでいこうと思います。