【问题标题】：CSS z-Index with position: relativeCSS z-Index 位置：相对
【发布时间】：2011-02-23 22:52:06
【问题描述】：

我正在使用 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>

（为了清楚起见，“progressBarActual” div 应该是“progressBarEmpty” div 宽度的 80%，而不是“progressBarGreen”）

编辑

这是我所追求的模型。

【问题讨论】：

我更新了我的答案，现在看起来像你的模型。你是如此接近。

标签： html css z-index

【解决方案1】：

Live Demo (updated)

与我上次演示的唯一变化：

我将top: 3 更改为top: 3px。
请参阅此处了解为什么需要这样做：（简而言之，您忘记了 px）
absolute positioning not working with XHTML?

Live Demo

将position: relative 添加到div.progressBarEmpty？

我不完全确定它应该是什么样子，但它现在看起来确实有点像Gantt chart。

如果这不太正确（我怀疑是这种情况），可能只是添加更多属性的问题，所以让我知道它有什么问题。

见：

【讨论】：

【解决方案2】：

你需要

position:relative;

在空栏上，这将允许绝对子栏相对于空栏定位，无论它们在页面上的位置以及有多少。

z-index 应该可以工作，请在 top: 和 left: 属性后添加 px

这就是它没有正确定位的原因，即更改 top:3;到顶部：3px;

;)

【讨论】：