Html 如何使div高于当前最前面的（z-index:0）div？

我正在构建一个使用纯CSS的仪表。它有一个背景，可以剪辑显示的进度颜色的剩余部分。我想在顶部添加另一个div，它给出了进度的文本指示：“10%”

似乎无论我做什么，我最终都会看到背景剪辑覆盖了我的文本

我这里有一个问题的例子：

我的代码非常精简，问题如下：

<div class="gauge-wrap">
    <div class="gauge-core">
        <div class="gauge-bg" style="background-color: #fff;">
            <div class="gauge-bg-value">10 %</div>
        </div>
        <div class="gauge-cap" style="background-color: #000;"></div>
    </div>
</div>

<script>
.gauge-bg-value {
  position: relative;
  color: #f0f;
  top: 7px;
  z-index: 6;
}

.gauge-wrap {
  position:relative;
  margin:0 0 20px;
}

.gauge-bg {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius:100px;
  z-index:0;
}

.gauge-cap {
  position: absolute;
  top:16px;
  left:16px;
  width: 168px;
  height: 168px;
  z-index:5;
}
</script>

10%
.仪表bg值{
位置：相对位置；
颜色：#f0f；
顶部：7px；
z指数：6；
}
.计量包装{
位置：相对位置；
利润率：0.20px；
}
.仪表bg{
位置：绝对位置；
宽度：200px；
高度：200px；
边界半径：100px；
z指数：0；
}
.仪表盖{
位置：绝对位置；
顶部：16px；
左：16px；
宽度：168px；
高度：168px；
z指数：5；
}

看起来z-index:0仍然位于我的文本div（.gauge bg值）的顶部，尽管我给了它一个更高的索引

更新-解决方案：

在构建示例时，我将文本移动到

.gauge cap

div中，现在它位于顶部。也许是那个一直在报道此事的部门。很高兴听到不修改html结构的解决方案。

这与此有关。在这种情况下

…如果

foo

和

baz

都创建堆叠上下文，并且

baz

的z指数高于

foo

，则无论发生什么情况，

bar

都不能出现在

baz

上方。您必须将标记拆分为不同的层（尽管在您的示例中，我认为使用SVG而不是HTML会更容易）。

这与此有关。在这种情况下

---

…如果

foo

和

baz

都创建堆叠上下文，并且

baz

的z指数高于

foo

，则无论发生什么情况，

bar

都不能出现在

baz

上方。您必须将标记拆分为不同的层（尽管在您的示例中，我认为使用SVG而不是HTML会更容易）。

请阅读并在问题itselfThank@Pete-有效点中创建一个，我将更新它。请阅读并在问题itselfThank@Pete-有效点中创建一个，我会更新的。谢谢-当你这样说的时候，它很有意义！谢谢-当你这样说的时候，它很有意义！