z-indexプロパティの重なりで、z-index: -1;を指定した時の注意点を確認します。
デモページはこちら

以下のhtml構造で確認します。クラス名div-childのdivタグに、順番にオレンジ・緑・青の背景色をつけます。

<div class="contents">
  <div class="div-parent">
    <div class="div-child"></div>
    <div class="div-child"></div>
    <div class="div-child"></div>
  </div>
</div>

CSSでposition、z-indexの指定がない場合、htmlの記述が後の要素が上に重なります。

オレンジにposition: relative、z-index: 3;、緑にposition: relative、z-index: 2;、青にposition: relative、z-index: 1;指定すると、この重なりが逆向きになります。

問題は次です。青のz-index: 1を、z-index: -1に変更します。すると青のdivタグは表示されません。chromeのコンソールで確認すると、クラス名contentsのdivタグの後ろに隠れているのがわかります。

これはbodyタグを1つの大きなスタックコンテキストとして、以下の順番の重なりになっているのが原因です。contentsのdivタグとdiv-parentのdivタグの、初期値のz-index: auto;はz-index: 0;と同じ深度です。

青（z-index: -1;）→contents（z-index: auto;）→div-parent（z-index: auto;）→緑（z-index: 2;）→オレンジ（z-index: 3;）

次に、親要素の白背景（div-parent）にposition: relative、z-index: 0;を指定します。div-parentがスタックコンテキストになったため、子要素のdiv-childのdivタグはz-indexの値が何であってもスタックコンテキストの外に出ることはありません。結果、青のdivタグが表示されます。重なりは以下の順番になります。

contents（z-index: auto;）→div-parent（z-index: 0;）→青（z-index: -1;）→緑（z-index: 2;）→オレンジ（z-index: 3;）

このように、z-index: -1を指定して要素が表示されなくなった場合、親要素をスタックコンテキストにすることで解決する場合があります。