CSS z-Index，位置：相對

Question

我正在使用CSS創建“甘特圖”樣式進度條。

它由一個空的進度條組成，內部有一個綠色欄，代表預期的進度。 在其頂部應該是另一個（較細的）黑條，它表示實際進度。

“實際”和“預期”欄是獨立的-即實際可能比預期的多或少，因此我不能只將“實際”欄嵌套在“預期”的div中。

我想在GridView或Repeater中有許多這樣的小進度條，所以我不能使用絕對位置。

我如何才能使z索引工作，以使“實際”欄位於“實際”欄的頂部？

我擁有的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>

（請注意，“ progressBarActual” div應該是“ progressBarEmpty” div寬度的80％，而不是“ progressBarGreen”的寬度）

編輯

這是我所追求的樣機。

Answer 1

現場演示（更新）

我上次演示的唯一變化是：

• 我將top: 3更改為top: 3px 。
• 請參閱此處以了解為什么需要這樣做：（ 總之，您忘記了px ）
  絕對定位不能與XHTML一起使用？

---

現場演示

添加position: relative對於div.progressBarEmpty ？

我不完全確定它的外觀，但現在確實看起來像甘特圖 。

如果這不太正確（我懷疑是這種情況），則可能只是添加更多屬性的問題，所以讓我知道它的問題所在。

看到：

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

Answer 2

你需要

position:relative;

在空白欄上，這將允許絕對子欄相對於空白進行定位，無論它們在頁面上的位置如何，以及有多少。

z索引應該可以正常工作，請在top：和left：屬性后添加px

這就是為什么它放置不正確的原因，即：top：3; 至頂部：3px；

;）