我正在构建一个使用纯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结构的解决方案。
答案 0 :(得分:2)
这与stacking context有关。在这种情况下......
<div class='foo'>
<div class='bar'></div>
</div>
<div class='baz'></div>
...如果foo
和baz
都创建了堆叠上下文,并且baz
的z-index高于foo
,则bar
永远不会无论如何,都会显示在baz
之上。你必须将你的标记分成不同的层(尽管在你的例子中,我认为你可以更容易地使用SVG而不是HTML)。