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 中有一个背景图像。

我想要在它的父 div 中使用 rgb() 的背景颜色(现在它只是红色)。

但是为什么子元素的背景在上面呢？是因为一个元素只能有背景颜色或背景图像吗？ child 的种类占据了主导地位？

我希望父 div 稍后有一个 rgba，这将产生某种类型的覆盖。

我已经设置了一个 jsfiddle 显示问题.. http://jsfiddle.net/9Rj9V/

Answer 1

Without z-index:

With z-index:

The Stacking Context:

In summary:

• Positioning and assigning a z-index value to an HTML element creates a stacking context, (as does assigning non-full opacity).
• Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
• Each stacking context is completly independent from its siblings: only descendant elements are considered when stacking is processed.
• Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. -MDN