CODEWITHSUNDEEP
cssz-index
penone
penone

Reputation: 792

Issue with an overlay and z-index

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.

Upvotes: 1

Views: 1746

Answers (1)

Dexter0015
Dexter0015

Reputation: 1039

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.

Upvotes: 1

Related Questions