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 开发者_Python百科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.

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/

you need

position:relative;

on the empty bar, this will allow the absolute sub-bars to position relative to the empty, where-ever they are positioned on the page and how ever many there are.

The z-index should work, please add px after the top: and left: properties

This is why it's not positioning properly i.e. change top:3; to top:3px;

;)