オーバレイとZインデックスの問題

Question

サイトが1つで、セクションが異なるページがあります。最初のセクションでは、私は以下のコード使用して、最初のセクションの上に青色のオーバーレイを追加してい：私はしたい第二節で

.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); 

：ここ

<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> 

は.cover.blueのCSSですオレンジ色のオーバーレイを使用しますが、オーバーレイのdivを適用すると、第1セクションのオーバーレイがテキスト、ボタンなどの前に表示され、色がオレンジ色に変わります。

第二セクションのHTML：.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);} 

ため

<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は私が間違って何をしているのですか？

ありがとうございます。

Answer 1

あなたが何をしたいのかがわかっている場合は、セクションごとに1つのオーバーレイを追加しようとします。これは、自分のセクションだけをカバーしたいものです。

これを行うには、各セクションのコンテナを追加して（クラスの振る舞いを標準化するのに役立ちます）、「固定」ではなく「絶対」の位置付けを使用します。

.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>

注：あなたのHTMLスニペットには問題がある：最初に、あなたはDIVを閉じるのを忘れて、第二に、あなたが二回最後のdivを閉じます。