CSS equal height columns with :before - unexpected background behaviour/stacking order

Question

I'm trying to implement something based upon:

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

In a nutshell, here is my test case:

http://jsfiddle.net/7CGCW/

Why are not both .panel's displayed with a green background?

All is well when my column sits atop a background-color'ed BODY (the second .panel), but when it sits atop a background-color'ed block (the first .panel, on top of .content), then the background of this DIV appears to sit atop my column, even when it is seemingly given an z-index that is lower in the stacking order.

The 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>

The 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

your content div needs to be positioned for z-index to work - read this about stacking context

at the moment it will have a z-index of 0 so it will be above your :before content

try

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

Example

ps, that tutorial is rubbish - if he is going to use pseudo selectors to make a background be equal height then he may as well make use of the display table property for proper equal height columns

Much easier to do with less markup and styles and don't have to think about all that z-indexing and positioning