Q:

CSS z-Index with position: relative

I am using css to create a "gantt-chart" style progress bar.
It consists of an empty progress bar, inside which is a green bar which represents expected progress. On top of this should be another (thinner) black bar which represents actual progress.
The "actual" and "expected" bars are independent - i.e. Actual could be more or less than expected, so I can't just nest the Actual bar inside the div for Expected.
I want to have a number of these little progress bars, in a GridView or Repeater, so I can't use position absolute.
How can I get the z-index to work so the Actual bar sits "on top" of the actual bar?
The CSS I have is:
div.progressBarEmpty
{
    height:11px;
    background-color:Silver;
    border: 1px solid black;
    font-size: 0.1em
}

div.progressBarGreen
{
    position:absolute;
    top:0;left:0;
    height:11px;
    background-color:#00ff33;
    border-right: 1px solid black;
    font-size: 0.1em
    z-index:0;

}

div.progressBarActual
{
    position:absolute;
    top:3;left:0;
    height:5px;
    background-color:black;
    border-style: none;
    font-size: 0.1em
    z-index:1;
}

And the html:
<div class="progressBarEmpty" style="width:100px">
    <div class="progressBarGreen" style="width:40%" > </div>
    <div class="progressBarActual" style="width:80%"> </div>
</div>

(Just to be clear, the "progressBarActual" div should be 80% of the width of the "progressBarEmpty" div, not the "progressBarGreen")
EDIT
Here's a mockup of what I'm after.

A:

Live Demo (updated)
The only change from my last demo:

I changed top: 3 to top: 3px.
See here for why that was required: (in short, you forgot the px)
absolute positioning not working with XHTML?

Live Demo
Add position: relative to div.progressBarEmpty?
I'm not entirely sure what it's supposed to look like, but it does now look vaguely like a Gantt chart.
If this isn't quite right (as I suspect is the case), it's probably just a matter of adding a few more properties, so let me know what's wrong with it.
See:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

