しゅう【Webサイト制作/改良
・コーダー】
のPortfolio Site

Xの投稿の下に、Geminiの詳しい解説貼ってます↓↓

以下、Gemini解説↓↓

z-index プロパティが子要素に適用された場合、その子要素の重なり順は、同じスタッキングコンテキスト (stacking context) 内の他の要素とのみ比較されます。

親要素に z-index が設定されている場合、その親要素は新しいスタッキングコンテキストを作成します。この新しいスタッキングコンテキスト内では、子要素の z-index の値は、あくまでその親要素の内部での重なり順を決定するだけであり、親要素の外にある要素の z-index の値とは直接比較されません。

例えるなら:

親要素が「額縁」のようなもので、子要素がその額縁の中に入った「絵」だと考えてください。子要素の z-index は、その額縁の中でどの絵が一番手前に来るかを決める役割を果たしますが、額縁自体が他の額縁よりも奥にある場合、中の絵がどんなに手前に配置されていても、他の額縁よりも前に出ることはできません。

親要素の z-index が auto (初期値) の場合:

親要素がスタッキングコンテキストを作成しないため、子要素の z-index は、その親要素と同じスタッキングコンテキスト内の他の要素と比較されます。この場合、子要素の値が親要素よりも大きければ、親要素よりも前面に表示される可能性があります。

親要素に position: relative, position: absolute, position: fixed, position: sticky のいずれかと、z-index の auto 以外の値が設定されている場合:

この親要素は新しいスタッキングコンテキストを作成します。このコンテキスト内では、子要素の z-index は親要素の背面よりも奥に配置することはできます（負の値を設定した場合）。しかし、親要素の前面よりも手前に表示されるかどうかは、親要素が配置されているスタッキングコンテキスト内の他の要素との比較によって決まります。

まとめ:

子要素に z-index を適用しても、親要素に z-index (かつ position が static 以外) が設定されている場合、子要素が親要素の範囲を超えて前面に表示されることは、原則としてありません。子要素の z-index は、あくまで親要素が作り出すスタッキングコンテキスト内での重なり順を決定するにとどまります。

z-index の挙動を理解するには、スタッキングコンテキストの概念を理解することが非常に重要です。

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます