Css 进度条、元素重叠和z索引：如何使其工作？

我这里有一个进度条，包含三个html元素：黄色块、红色块和文本块，用作进度标签

演示：

8/10

红色和黄色块是附加的，因此它们混合成表示进度百分比的颜色（红色条具有特定的不透明度设置）

但是我的文本元素不显示，我不明白为什么

---

有人能帮忙吗？

我已经记录了

.pinim pc bar text

的CSS更改。当元素处于绝对位置时，它们将从文档流中取出。同样的情况也需要发生在文本中

.pinim pc条{
位置：相对位置；
显示：块；
背景色：rgba（204、204、204、0.4）；
明确：两者皆有；
宽度：100%；
高度：1.3em；
线高：1.3em；
}
.pinim pc条。pinim pc条填充{
显示：块；
身高：100%；
文本对齐：左对齐；
-moz过渡：所有0.5s的缓变；
-o型过渡：所有0.5s缓解；
-webkit过渡：所有0.5s都可以轻松过渡；
过渡：所有0.5s缓解；
位置：相对位置；
}
.pinim pc条。pinim pc条填充。pinim pc条填充颜色{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.pinim pc条。pinim pc条填充。pinim-pc-bar-fill-color.pinim-pc-bar-fill-yellow{
背景色：#000；
}
.pinim pc bar.pinim pc bar fill.pinim-pc-bar-fill-color.pinim-pc-bar-fill-red{
背景色：红色；
}
.pinim pc条。pinim pc条填充。pinim pc条文本{
保证金：自动；
显示：块；
/*文本对齐：居中；不起作用*/
/*添加*/
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
/*结束添加*/
}
.pinim pc条。pinim pc条填充。pinim pc条文本i.fa{
填充：0.5em；
}
.pinim-pc-bar.color-light.pinim-pc-bar文本{
颜色：白色；
}
.pinim-pc-bar.empty.pinim-pc-bar填充{
宽度：100%！重要；
}
.pinim-pc-bar.empty.pinim-pc-bar填充颜色{
显示：无；
}
.pinim-pc-bar.empty.pinim pc-bar文本{
颜色：继承；
字号：0.8em；
}
.pinim-pc-bar。不完整。pinim pc-bar文本{
文本对齐：右对齐；
}

8/10

只需将负的

z-index

添加到条中，并将

z-index:0

添加到它们的容器中，将它们保持在同一个容器中，并生成上面的文本

.pinim pc条{
位置：相对位置；
显示：块；
背景色：rgba（204、204、204、0.4）；
明确：两者皆有；
宽度：100%；
高度：1.3em；
线高：1.3em；
}
.pinim pc条。pinim pc条填充{
显示：块；
身高：100%；
文本对齐：左对齐；
-moz过渡：所有0.5s的缓变；
-o型过渡：所有0.5s缓解；
-webkit过渡：所有0.5s都可以轻松过渡；
过渡：所有0.5s缓解；
位置：相对位置；
z指数：0；
}
.pinim pc条。pinim pc条填充。pinim pc条填充颜色{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：-1；
}
.pinim pc条。pinim pc条填充。pinim-pc-bar-fill-color.pinim-pc-bar-fill-yellow{
背景色：#000；
}
.pinim pc bar.pinim pc bar fill.pinim-pc-bar-fill-color.pinim-pc-bar-fill-red{
背景色：红色；
}
.pinim pc条。pinim pc条填充。pinim pc条文本{
保证金：自动；
显示：块；
文本对齐：居中；
}
.pinim pc条。pinim pc条填充。pinim pc条文本i.fa{
填充：0.5em；
}
.pinim-pc-bar.color-light.pinim-pc-bar文本{
颜色：白色；
}
.pinim-pc-bar.empty.pinim-pc-bar填充{
宽度：100%！重要；
}
.pinim-pc-bar.empty.pinim-pc-bar填充颜色{
显示：无；
}
.pinim-pc-bar.empty.pinim pc-bar文本{
颜色：继承；
字号：0.8em；
}
.pinim-pc-bar。不完整。pinim pc-bar文本{
文本对齐：右对齐；
}

8/10
嗨！此进度条（彩色部分）包含三个html元素：一个黄色块（.pinim pc bar fill yellow）、一个红色块（.pinim pc bar fill red）和一个文本块（.pinim pc bar text），用作进度标签


红色和黄色块是附加的，因此它们混合成表示进度百分比的颜色（红色条具有特定的不透明度设置）。

但为什么我的文本元素不显示？谢谢
 

使用此CSS代码：

.pinim-pc-bar.incomplete .pinim-pc-bar-text{position: relative;}

.pinim-pc-bar.incomplete .pinim-pc-bar-text{position: relative;}