CSS 等高列与 :before - 意外的背景行为/堆叠顺序

Question

我正在尝试实现一些基于：

http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

简而言之，这是我的测试用例：

http://jsfiddle.net/7CGCW/

为什么两个 .panel 的背景都不显示为绿色？

当我的专栏位于背景色的 BODY（第二个 .panel）顶部时，一切都很好，但是当它位于背景色块的顶部（第一个 .panel，在 .content 的顶部）时，然后这个 DIV 的背景似乎位于我的列的顶部，即使它看起来被赋予了一个在堆叠顺序中较低的 z-index。

HTML：

<div class="content">
    <div class="positioned">
        <div class="panel">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel rutrum libero. Proin in metus id odio rutrum posuere at ac dui. Etiam sollicitudin in dui sed imperdiet. Suspendisse eu erat nec ipsum facilisis iaculis.
        </div>
    </div>
</div>

<div class="positioned">
    <div class="panel">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel rutrum libero. Proin in metus id odio rutrum posuere at ac dui. Etiam sollicitudin in dui sed imperdiet. Suspendisse eu erat nec ipsum facilisis iaculis.
    </div>
</div>

CSS：

body {
    background-color: red;
    color: blue;
}

.content {
    background-color: red;
    z-index: -2;
}

.positioned {
    position: relative;
}

.panel:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-color: green;
    width: 100%;            
}

Answer 1

您的内容 div 需要定位以使 z-index 工作 - read this about stacking context

目前它的 z-index 为 0，因此它将高于您的 :before 内容

试试

.content {
    background-color: red;
    position:relative;
    z-index: -2;
}

Example

ps，那个教程是垃圾 - 如果他要使用伪选择器使背景等高，那么他不妨使用display table property for proper equal height columns

用更少的标记和样式更容易做到，并且不必考虑所有 z 索引和定位