CSS z-Index с позицией: относительный

Question

Я использую css для создания индикатора выполнения в стиле «диаграммы Ганта».

Он состоит из пустого индикатора выполнения, внутри которого находится зеленый индикатор, обозначающий ожидаемый прогресс. Поверх этого должна быть другая (более тонкая) черная полоса, которая представляет фактический прогресс.

«Фактические» и «ожидаемые» столбцы независимы, т. Е. Фактические значения могут быть больше или меньше ожидаемых, поэтому я не могу просто вкладывать фактические столбцы в div для ожидаемых значений.

Я хочу, чтобы в GridView или Repeater было несколько таких маленьких индикаторов, поэтому я не могу использовать абсолютную позицию.

Как заставить z-index работать так, чтобы фактический бар находился "сверху" фактического бара?

CSS у меня есть:

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;
}

И HTML:

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

(Для ясности, div "progressBarActual" должен составлять 80% ширины div "progressBarEmpty", а не "progressBarGreen")

EDIT

Вот макет того, что мне нужно.

Answer 1

вам нужно

position:relative;

на пустой панели, это позволит абсолютным суббарам позиционироваться относительно пустой, где бы они ни находились на странице и сколько их будет.

Должен работать z-индекс, пожалуйста, добавьте px после верха: и left: properties

Вот почему он не позиционируется должным образом, т.е. измените top: 3;вверх: 3px;

;)

Answer 2

Живая демоверсия (обновлено)

Единственное изменение по сравнению с моей последней демо:

• Iизменено top: 3 на top: 3px.
• См. здесь, почему это необходимо: (короче, вы забыли px)
  абсолютное позиционирование не работаетс XHTML?

---

Live Demo

Добавить position: relative в div.progressBarEmpty?

Я не совсем уверен, как он должен выглядеть, но теперь он выглядит неопределенно как диаграмма Ганта .

Если это не таксовершенно верно (как я подозреваю, дело в этом), возможно, это просто вопрос добавления еще нескольких свойств, поэтому дайте мне знать, что с ним не так.

См .:

• http://css -tricks.com / абсолютное позиционирование внутри-относительное позиционирование /
• http://css -tricks.com / абсолютное-относительное-фиксированное-позиционирование-как-делают они отличаются /