CSS transparency issue with background text using transform - html

Question

I have a colored semi-transparent div (.box) in front of some other divs (.textDisplay) containing text. One of these background divs (on the left) displays correctly, with the text faded due to the transparent div overlaid on top of it. The other one, though, doesn't fade at all. I want both divs displaying like the one on the left.
EDIT: I cannot modify the HTML's structure (it's generated by Elm in a nested manner). Is there a way to do this with CSS only?
EDIT 2: It was a stacking context problem due to the transform property. See my answer for further details.
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 50%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.behind {
position: absolute;
transform: translate(-50%, -50%);
}
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
</div>
</div>
</div>
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>

Answer 1

Like this?
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 50%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.behind {
position: absolute;
transform: translate(-50%, -50%);
}
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
</div>
</div>
</div>

Answer 2

Put .box outside of .behind. I tweaked the css a bit to demo but you'll get the idea.
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 15%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.behind {
position: absolute;
transform: translate(-50%, -50%);
}
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
</div>
</div>
</div>
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>

Answer 3

The transform property creates a new stacking context. As the linked article explains, this stacking context is then atomically (as a single thing) incorporated within it's parent stacking context. The z-index defined within it cannot transcend the context. There are diagrams illustrating this much better in the article.
Instead of using transform: translate(-50%, -50%); for centering, we can use left: -50%; top: -50%;, as demonstrated by the modified snippet. There has to be one div with the desired width and height (.behind) who's top left corner is where we want the center of the target div to be. See the .content class for an example of how to achieve the centering of the target div.
Once the div is centered with an alternate method, everything is in the same stacking context. Now a simple z-index: 100 on the desired element (or one of it's children, like in the snippet) will raise it above the rest, achieving the desired transparency effect.
.textDisplay {
height: 100%;
width: 100%;
text-align: center;
}
.box {
width: 200px;
padding: 20px;
background-color: #8CA8DA;
position: absolute;
top: 50%;
left: 50%;
margin-left: 20px;
transform: translateY(-50%);
opacity: 0.8;
}
.content {
left: -50%;
top: -50%;
height: 100%;
width: 100%;
position: absolute; /* or relative */
}
.behind {
position: absolute;
/*transform: translate(-50%, -50%); REMOVED*/
}
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 0</div>
<div class="box" style="z-index: 100;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
</div>
</div>
</div>
</div>
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
<div class="content">
<div>
<div class="textDisplay">Test Text 1</div>
</div>
</div>
</div>