HTMLとCSSのレイアウトで親要素の裏側に子要素を移動したい。つまり親子間での重ね順を変える場合どうしてますか？
positionプロパティとz-indexプロパティを使って移動させるはずです。
でも、なかなか思い通りに動いてくれないはずです。
もしかしたら、親要素に 「z-index:0」 として子要素を 「z-index:-1」 にしていませんか？
これは間違いです。
正しい設定は親要素を 「z-index:auto」にすることです。
残念ながら多くのネット情報や本では 「z-index」の説明が間違っています。
「z-indexを何も指定していない場合はz-index:0」
と言うのは間違いです。
正しくは「z-indexを何も指定していない場合はz-index:auto」です。
なぜ間違った説明が大量に出回っているのか？
誤解を生む原因はCSSの仕様書から来ていると思われます。
以下は「z-index」の値の説明からautoの部分の説明です。
auto : 現在のスタックコンテキストにおける生成ボックスのスタックレベルは0になる。
仕様書にあるスタックレベルは0になると言う記述です。
この記述が派生して誤解を生んでいると思われます。
けれどもCSS仕様書の記述はautoを使うことで対象要素の所属するスタックコンテキストを外れて、レベル0になるということです。つまり子要素を作った場合この親要素のレベル0を基準に新しいスタックコンテキストが生まれることになります。
ネットなどの入門編の解説はこのスタックコンテキストの説明がされていません。
今回の親子関係の例では、子要素のスタックコンテキストと親要素のスタックコンテキストはそもそも別のコンテキストです。
親要素にpositionを指定して「z-index」の番号を付けても親子間の番号ではなく、親の兄弟間の順番を決めているだけです。
そのため親要素の所属するスタックコンテキストの番号を0（z-index:0）にしても子要素にはなんの影響も出ないわけです。
最初の例では、親要素を現在のコンテキストから外したら（z-index:auto にしたら）親子間でのスタックコンテキストが 0 になります。
そのため子要素に「z-index:-1」を設定すると重ね順が変わるのです。
「z-index」とスタックコンテキストについては過去に記事を書いていますので参照ください。
z-indexの使い方〜詳説
また、floatで使う「overflow:hidden」もこのコンテキストが関わっています。詳細は以下の記事を参照ください。
floatの仕組みとoverflowでfloat解除できる理由
何れにしても、「z-index」で重ね順を変更することは以外に難易度が高いです。
失敗しない方法は、「z-index」を使って重ね順を変更したい要素はHTMLコーディングの段階で兄弟関係にしておくことで解決されます。
複雑な親子関係で「z-index」は使わないことです。
最近のネットのWeb入門の記述は直感的にわかりやすい内容にはなっていますが、誤解を生みやすい内容になっています。
気をつけましょう。
