Issue with an overlay and z-index - css

Question

I have a site that is a 1 page with different sections. On the first section I am adding a blue overlay over the first section using the below code:
<header class="text-center" name="home">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</header>
Here is the css for .cover.blue:
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.blue{
background-color: rgba(5, 31, 60, 0.6);
In the 2nd section I want to use an orange overlay but when I apply the div for the overlay the overlay on the 1st section is going in front of my text, buttons, etc and the color is changing to orange.
2nd section html:
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
</div>
Css for .cover.orange
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.orange{
background-color: rgba(37, 28, 5, 0.6);}
What am I doing wrong?
Thanks for any input.

Answer 1

If i corectly understand what you want to do, you try to add 1 overlay by section, which you want to cover only his own section.
To do taht, I would choose to add a container for each section (to help standardize behaviour with classes) a use "absolute" positionning rather than "fixed".
.container {
position: relative;
z-index: 1;
}
.cover{
position: absolute;
opacity: 0.5;
background-color: grey;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 3;
}
.cover.blue{
background-color: blue;
}
.cover.orange{
background-color: orange;
}
<header class="text-center" name="home">
<div class="container">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</div>
</div>
</header>
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
Note: your HTML snippets have issues : in the first, you forgot to close div, and in the second you close the last div twice.