如何将 div 置于当前最前面 (z-index: 0) div 之上？

Question

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

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

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

https://svelte.technology/repl?version=1.60.3&gist=77e1b55c23e229dee8d45b5648610593

我的代码的一个非常精简的版本，演示问题如下：

<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>

似乎 z-index: 0 仍然在我的文本 div (.gauge-bg-value) 之上，尽管我给了它更高的索引。

更新-解决方案：

在构建示例时，我将文本移到了 .gauge-cap div 中，现在它位于顶部。也许是 div 一直覆盖它。很高兴听到不修改 html 结构的解决方案。

Answer 1

这与 stacking context 有关。在这种情况下...

<div class='foo'>
  <div class='bar'></div>
</div>

<div class='baz'></div>

...如果 foo 和 baz 都创建堆叠上下文，并且 baz 的 z-index 高于 foo，则 bar无论如何都不能出现在 baz 以上。您必须将标记分成不同的层（尽管在您的示例中，我认为使用 SVG 而不是 HTML 会更轻松）。

如何将 div 置于当前最前面 (z-index: 0) div 之上？

How can I bring a div above the current front-most (z-index: 0) div?

html

css

z-index

svelte