html - 试图制作一个包含文本的 slider

Question

我正在尝试制作一个 slider 。我的 div 是#foo、#bar 和#text。

#foo 是容器div

#bar 是 #foo 中的彩色 div。它用可变百分比宽度填充它。

#text 是 #foo 中的透明 div(文本除外)。它应该在 #bar 之上。

Something like this (image)

如何使用 CSS 实现此目的？我的代码目前看起来像这样:

#foo {
  background: red;
  width: 100px;
  height: 20px;
  z-index: 1;
}

#bar {
  background: green;
  width: 50px;
  float: left;
  height: 20px;
  z-index: 2;
}

#text {
  z-index: 3;
}

<div id="foo">
  <div id="bar"></div>
  <div id="text">
    Some text.
  </div>
</div>

Answer 1

是这样的吗？

#slider {
  width: 200px;  
  height: 30px;
  background-color: black;
  position: relative;
}

#percentage {
  color: white;
  line-height: 30px;
  margin-left: 10px;
  position: absolute;
}

#bar {
  width: 75%;
  height: 30px;
  background-color: red;
  position: absolute;
}

<div id="slider">
  <div id="bar">
  </div>
  <div id="percentage">75%</div>
</div>