css - 親の背景色の上に子要素の背景画像があるのはなぜですか?

Question

次のCSSコードがあります。

#overlayouter
        {
            display: inline-block;
            background-color: red;

            width: 900px;
            height: 900px;

            z-index: 100;
        }
        #overlayinner
        {
            display: inline-block;
            position: relative;

            z-index: 0;

            width: 900px;
            height: 900px;

            background-image: url(picurl);
            background-position: 0 0;
            background-repeat: no-repeat;
        }

HTML は次のとおりです。

<div id="overlayouter">
    <div id="overlayinner">

    </div>    
</div>

子 div に背景画像があります。

そして、rgb() を使用して、親 div に背景色が必要です (現在は赤になっています)。

しかし、なぜ子要素の背景が一番上にあるのでしょうか? 要素が background-color または background-image しか持てないからですか? そして、子供の種類が優先されますか？

親の div に、後である種のオーバーレイを作成する rgba を持たせたいと考えています。

問題を示すjsfiddleをセットアップしました.. http://jsfiddle.net/9Rj9V/

Answer 1

z インデックスなし:

Z インデックスを使用:

スタッキング コンテキスト:

要約すれば：

• z-index 値を配置して HTML 要素に割り当てると、スタッキング コンテキストが作成されます (完全でない不透明度を割り当てる場合と同様)。
• スタッキング コンテキストは、他のスタッキング コンテキストに含めることができ、一緒にスタッキング コンテキストの階層を作成できます。
• 各スタッキング コンテキストは、その兄弟から完全に独立しています。スタッキングが処理されるときは、子孫要素のみが考慮されます。
• 各スタック コンテキストは自己完結型です。要素のコンテンツがスタックされた後、要素全体が親スタック コンテキストのスタック順で考慮されます。 -MDN

Answer 2

に変更z-index: 0;します。jsfiddle.net/9Rj9V/1z-index: -1;#overlayinner