html - CSS3 の z-index の問題

Question

このような「ダミー」の質問で申し訳ありませんが、解決策を見つけることができませんでした。

状況を図で示しました。

ここに画像の説明を入力

の中にはcontainer、2 つの兄弟 (RED <div>とBLUE <div>) がいます。どちらもposition: absolute;

REDはありますz-index:1; BLUEはありますz-index:2;

REDの子 ( GREEN ) はposition:relative;とz-index:99;

GREENをBLUEより上にしたい

ありがとうございました！

UPDATE 1. ここにフィドルがあります

score 3 · Accepted Answer

それを解決するための鍵は、 sudhAnsu63 によってリンクされた記事にあります。

新しいスタッキングコンテキストは、次の 3 つの方法のいずれかで要素に形成できます。

要素がドキュメントのルート要素 (要素) である場合

要素の position 値が static 以外で、z-index 値が auto 以外の場合

要素の不透明度が 1 未満の場合

しかし、解釈は正反対です。赤と緑の間に青の要素を設定するために、赤の要素はスタックコンテキストを生成できません。2 番目のルールにより、スタッキングコンテキストが生成されます。auto とは異なる z-index の絶対位置があります。

したがって、解決策は次のとおりです。

#red{
    z-index:auto;
}

score 1 · Accepted Answer

赤の z-index は青よりも低いため、これは機能しません。z-index は、共通のルート要素を持つ要素でのみ機能します。

この記事のStacking Contextsの部分を確認してください。

score 1 · Accepted Answer

ここで、Blue div と Red div はコンテナ div の直接の子です。z-Index は正確には機能しません。

blue div の不透明度を 0.99 に変更してみてください。

.bluediv {
  opacity: .99;
}