html - 显示堆叠的多个子DIV

我有一个进度条，应该同时显示多个值
一个例子可能看起来像这样：


我不要


进行微调整（如margin-top: -20px）
使用供应商前缀（如display: -webkit-inline-box;）


的HTML：

<div id="progress">
  <div id="progress-buffer"></div>
  <div id="progress-time"></div>
</div>

CSS：

#progress {
  background: #333;
  height: 20px;
  width: 300px;
}
#progress-buffer {
  background: orange;
  width: 50%;
  height: 100%;
}
#progress-time {
  background: green;
  width: 25%;
  height: 100%;
}

example on jsfiddle

最佳答案

怎么样，添加到您已经得到的。

#progress
{
    position:relative;
}

#progress-buffer, #progress-time
{
    position:absolute;
}

第一个position:relative;确保后续的position:absolute;相对于#progress。

这是jsFiddle。

关于html - 显示堆叠的多个子DIV，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17606104/