修改

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>

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

修改

这是我所追求的模型。

enter image description here

Answer 1

Live Demo (updated)

我上次演示的唯一变化：

我将top: 3更改为top: 3px。
请在此处查看为何需要：（简而言之，您忘记了px）
absolute positioning not working with XHTML?

Live Demo

将position: relative添加到div.progressBarEmpty？

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

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

请参阅：

Answer 2

你需要

position:relative;

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

z-index应该有效，请在top：和left：properties

之后添加px

这就是为什么它没有正确定位，即改变顶部：3;顶部：3px;

）

带位置的CSS z-Index：relative

修改

2 个答案: