CSS等高列具有:before - unexpected背景行为/堆叠顺序

Question

我想实现一些基于:

http://webdesign.tutsplus.com/tutorials/quick -提示-解决- - =身高-列难题- cms - 20403

简单地说，下面是我的测试用例: http://jsfiddle.net/7CGCW/

为什么不是两个面板都显示绿色背景?

当我的列位于background-color' BODY(第二个。panel)之上时，一切都很好，但是当它位于background-color' 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工作-阅读关于堆叠上下文

现在它的z-index值是0所以它会高于你的:before值

试

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

例子

ps，那个教程是垃圾-如果他要使用伪选择器使背景等高，那么他可能还不如使用display table属性为适当的等高列

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