Html div元素的正确z索引

我有以下HTML代码：

<div class="caption_center">
    <h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
    <p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
    <div class="caption_center_Background"></div>
</div>

其结果如下：

我试图实现的（最终）是，这个黑框的不透明度为0.5，文本将位于这个黑框的前面。这样，无论我的图像的背景是什么，用户仍然能够看到文本（这就是为什么会出现半透明的黑框）

尽管如此，即使我已经指定了z索引，我仍然无法强制文本位于黑色div框的前面。我还尝试将框作为第一个元素（意味着它在

h1

和

p

元素之前），但没有改变

我做错了什么

---

另外，我试着模仿。

z-index没有问题，但需要指定

位置才能工作。设置
位置
属性的值对于工作至关重要，因为
z索引
对
位置
为
静态
的元素没有影响（这是
位置
属性的默认值）

发件人：（重点是我的）

CSS中的z索引属性控制重叠元素的垂直堆叠顺序。在中，哪一个看起来好像离你更近z-index仅影响位置值不是静态的元素（默认值）


.caption\u中心{
位置：绝对位置；
高度：自动；
文本对齐：居中；
颜色：白色；
左：20%；
最高：50%；
-moz变换：平移（0，-50%）；
-ms变换：翻译（0，-50%）；
-o变换：平移（0，-50%）；
-webkit转换：翻译（0，-50%）；
转换：翻译（0，-50%）；
宽度：60%；
/*背景：rgba（138,138,138,0.55）*/
垫面：1米；
}
.说明\u中心\u背景{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
背景色：黑色；
不透明度：0.5；
z指数：0；
}
.caption_标题{
位置：相对位置；
z指数：999；
}
.标题(常规){
位置：相对位置；
z指数：998；
}

罗比梅·瓦斯维特·波霍德尔内伊
Dovolte nám presvedčiťVás o tom
请尝试此


.caption\u标题{
位置：相对位置；
z指数：999；
}
.标题(常规){
位置：相对位置；
z指数：998；
}
您只需要将文本放在这个背景div中

这是一个更新的代码段：


.caption\u中心{
位置：绝对位置；
高度：自动；
文本对齐：居中；
颜色：白色；
左：20%；
最高：50%；
-moz变换：平移（0，-50%）；
-ms变换：翻译（0，-50%）；
-o变换：平移（0，-50%）；
-webkit转换：翻译（0，-50%）；
转换：翻译（0，-50%）；
宽度：60%；
/*背景：rgba（138,138,138,0.55）*/
垫面：1米；
}
.说明\u中心\u背景{
位置：绝对位置；
宽度：自动；
高度：自动；
排名：0；
背景色：黑色；
不透明度：0.5；
z指数：0；
}
/*.caption_标题{
z指数：999；
}
.标题(常规){
z指数：998；
}*/

罗比梅·瓦斯维特·波霍德尔内伊
Dovolte nám presvedčiťVás o tom
谢谢！工作起来很有魅力。我不知道这个职位在这里如此重要是的，是的。它应该从
.caption\u center
Nice选项中插入颜色，但请注意，将
不透明度：0.5
添加到父级也会影响子级的不透明度。（也就是说，如果您将文本颜色更改为红色或绿色等，则显示颜色将不符合预期）。是的@Harry，指出得很好，我只是使用了这个选项，因为文本是白色的，但毫无疑问，固定位置的选项是这里的最佳线索。不，实际上正如我所说的，它指出得很好。这确实是一个很好的建议。
.caption_center {
    position: absolute;
    height: auto;
    text-align: center;
    color: white;
    left: 20%;
    top: 50%;
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    width: 60%;
    /*background: rgba(138, 138, 138, 0.55);*/
    padding-top:1em;
}

.caption_center_Background {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background-color:black;
    opacity:1;
    z-index:0;
}

.caption_header  {
    z-index:999;
}

.caption_regular {
    z-index:998;
}