問題與覆蓋和z-索引

我有一個網站是不同部分的1頁。在第一部分，我用下面的代碼添加藍色覆蓋在第一部分：問題與覆蓋和z-索引

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

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

在第二部分，我想使用橙色覆蓋層，但是當我將覆蓋層應用於覆蓋層時，第1部分的覆蓋層會出現在我的文本，按鈕等前面，並且顏色正在變爲橙色。

第二部分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 .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);}

我在做什麼錯？

感謝您的任何意見。

來源

2016-11-16 penone

它可以幫助你創建CodePen來顯示問題。我不確定橙色是否涵蓋所有內容或藍色。 – niemaszoka

你的代碼看起來像是在做它應該做的事情，這是**覆蓋**（坐在最上面）一些其他元素。所以預計你不能點擊項目和文本顏色變化。你究竟想要做什麼？ – hungerstar

如果我正確地理解你想要做的事情，你可以嘗試按部分添加1個覆蓋層，你只想覆蓋他自己的部分。

要做TAHT，我會選擇爲每個部分添加一個容器（以幫助標準化類的行爲）使用「絕對」定位而不是「固定」。

.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的兩倍。

來源

2016-11-16 17:40:19 Dexter0015

問題與覆蓋和z-索引

回答

相關問題