Here's the HTML code I'm working with:
<div class="caption_center">
<h1 class="caption_header font-alpha">Making Your World More Comfortable</h1>
<p class="caption_regular font-alpha">Let us convince you of that</p>
<div class="caption_center_Background"></div>
</div>
and here is the CSS associated with it:
.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;
}
After applying this code, the result should look like this:
https://i.sstatic.net/r7Ghu.png
The ultimate goal is to have a black box with an opacity of 0.5 and the text in front of it. This way, regardless of the image background, the text remains visible thanks to the semi-transparent black box.
Despite setting the z-index, the text still isn't appearing in front of the black div box. Even rearranging the elements didn't make a difference.
What could be going wrong here?
P.S. I was attempting to imitate the following fiddle.