html - 具有 :before - unexpected background behaviour/stacking order 的 CSS 等高列

Question

我正在尝试基于以下内容实现一些东西:

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

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

http://jsfiddle.net/7CGCW/

为什么两个 .panel 都没有显示为绿色背景？

当我的专栏位于背景颜色的 BODY(第二个 .panel)之上时，一切都很好，但是当它位于背景颜色的 block 之上(第一个 .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 索引和定位