CSS: text is not visible - css

Question

We have CSS .block.block-dark h2 {color: #ffba0d;} but both the h2 & p are invisible below.
The div they are in has a higher z-index than the div preceding them that has the background color (<div class="column-overlay block-dark" style="opacity: 90%"> </div>).
I can't see why the background color is displaying over the top of the div with the text in it.
Help appreciated.
.column-bg-img {background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Residential_Air_Conditioning.jpg');}
.block .block-background-image.bg-scroll {
background-attachment: scroll;
}
.block .block-background-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.block .block-background-image, .block-overlay {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.columns_block .column-bg-img, .columns_block .column-overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.columns_block .column-overlay.block-dark {
background-color: #2d3133;
}
.block.block-dark h2, .block.block-white h2, .carousel_block .carousel .carousel-inner .carousel-item .carousel-caption .carousel-caption-inner h3 {
color: #ffba0d;
}
#media (min-width: 1200px) {
.col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
}
<div class="container-wrapper block columns_block block-dark">
<div class="block-overlay" style="opacity: 90%"></div>
<!-- columns-block.twig -->
<div class="block-background-image bg-scroll" style="background-image: url('');"></div>
<div class="container-fluid">
<div class="row" data-scroll="in">
<div class="col-12 col-xl">
<div class="column-bg-img" style="background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Residential_Air_Conditioning.jpg');"></div>
<div class="column-overlay block-dark" style="opacity: 90%"> </div>
<div class="column">
<h2 style="text-align: center;">Residential</h2>
<p style="text-align: center;">We’ve been installing, servicing, and repairing air conditioning systems in people’s homes for decades.<br>
Our experience and expertise allows us to offer the ideal air conditioning system for you</p>
</div>
</div>
<div class="col-12 col-xl">
<div class="column-bg-img" style="background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Commercial_Air_Conditioning.jpg');"></div>
<div class="column-overlay block-dark" style="opacity: 90%"> </div>
<div class="column">
<h2 style="text-align: center;">Commercial</h2>
<p style="text-align: center;">We install air conditioners for commercial and industrial buildings,<br>
and are able to offer systems tailored to the exact needs of your business.</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

Its because the <div> element holding the text don't have z-index property where the <div> element holding background has z-index:0 property. Try adding this css rule.
.column {
position: relative;
z-index: 2;
}

Answer 2

Your problem lies in the
.columns_block .column-bg-img, .columns_block .column-overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
Change your z-index to be z-index:-999;
this should fix your issue.
so the solution to your code is :
.columns_block .column-bg-img, .columns_block .column-overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -999;
}
Explanation: the default z-index for all elements is 0, if you did not put a z-index for the elements inside your overlay(ed) div, then they will also assume z-index:0 which is what is currently hiding your elements. Either put a higher z-index to your h2 , p tags or reduce the z-index of your background overlay to be in the negative range(-999).