CSSにおける負のz-index値の適用に関する注意点

要素の z-index が設定されていない場合、 その値は 0 として扱われます。 これは、 z-index が -1 の要素は、 z-index が設定されていない要素の下に表示されることを意味します。

2つの要素を用いた例を次のように書き換えることができます: 2番目の要素に z-index を -1 に設定するだけで、 それは最初の要素の下になります:

css#elem1 {
  /* z-indexは設定しない */
}
#elem2 {
  z-index: -1;
}

コードの実行結果: