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

【问题标题】：Why is background-image of childelement ontop of parents background-color?为什么子元素的背景图像在父背景颜色之上？
【发布时间】：2013-06-08 14:38:22
【问题描述】：

我有以下 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/

【问题讨论】：

你需要z-index: -1;吗？ jsfiddle.net/9Rj9V/1
这似乎行得通！谢谢。我认为 z-indexes 只是相对于彼此？
它们有一些怪癖，具体取决于浏览器等。很高兴你得到了它的工作方式，我已经为你解答了。

标签： css

【解决方案1】：

Without z-index:

With z-index:

The Stacking Context:

总结：

为 HTML 元素定位和分配 z-index 值会创建堆叠上下文（分配非完全不透明度也是如此）。

堆叠上下文可以包含在其他堆叠上下文中，并共同创建堆叠上下文的层次结构。

每个堆叠上下文完全独立于其兄弟元素：处理堆叠时仅考虑后代元素。

每个堆叠上下文都是自包含的：在元素的内容被堆叠之后，整个元素都被考虑在堆叠中父堆叠上下文的顺序。 -MDN

【讨论】：

【解决方案2】：

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

【讨论】：