Question

我有一个父母和一个孩子div。我想将父母的文字放在孩子的背景色上。查看我的示例，这样更有意义。我想做到这一点：goal

现在我正在使用不透明性来遮盖进度条的标签。我的目标是只使用正常的颜色而没有不透明性，并且仍然清晰地看到标签。

 <div class="outer">
      <div class="inner"></div>
      67 / 90
 </div>

https://jsfiddle.net/sjr40oqt/5/

Answer 1

在外部div上使用overflow: hidden;以避免内部div溢出

Answer 2

仅在后台使用.inner进行移动

z-index: -1;

结果：https://jsfiddle.net/wmt056dn/

Answer 3

像这样吗？

div.outer {
    border-radius: 25px;
    border: 3px solid black;
    background-color: gray;
    width: 40%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    height: 1em;
}

div.inner {
    height: 26px;
    background-color: green;
    width: calc((67 / 90) * 100%);
    position: absolute;
}

div.label {
    position: absolute;
    width: 100%;
}

<div class="outer">
  <div class="inner"></div>
  <div class="label">67 / 90</div>
</div>

我正在尝试在html，css中创建一个简单的progressbar。但是我的div重叠

3 个答案: