为什么子元素的背景图像在父母背景颜色之上？

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（）（现在它只是红色）。

但为什么儿童元素背景在顶上？是因为元素只能有背景色或背景图像吗？孩子的那种需要优先考虑？

我希望父div在以后有一个rgba，这会产生某种类型的叠加。

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

Answer 1

Without z-index:

With z-index:

The Stacking Context:

  

总结：

     

  
• 将z-index值定位并分配给HTML元素会创建堆叠上下文（分配非完整不透明度）。
  
• 堆叠上下文可以包含在其他堆叠上下文中，并一起创建堆叠上下文的层次结构。
  
• 每个堆叠上下文完全独立于其兄弟姐妹：处理堆叠时只考虑后代元素。
  
• 每个堆叠上下文都是自包含的：在堆叠元素的内容之后，在堆叠中考虑整个元素   父堆叠上下文的顺序。   -MDN
  

Answer 2

将z-index: 0;更改为z-index: -1; #overlayinner。 jsfiddle.net/9Rj9V/1