我如何將內容帶到疊加層上？ - CSS問題

Question

該div標籤有一個背景圖像，我想疊加在主標籤的背景圖像和其他內容在他們兩個。但下面的代碼會將overlay標籤放在conent上。

HTML：

<div id="nav-section"> 
    <div class="overlay"></div> 
    <div class="container"> 
     <p>test</p> 
     <h5>test</h5> 
    </div> 
</div> 

CSS：

#nav-section{ 
background-image: url('../img/1.jpg'); 
background-position: top center; 
background-size: cover; 
position: relative; 
} 

#nav-section .overlay{ 
position: absolute; 
top: 0; 
height: 100%; 
width:100%; 
background-color: rgba(0,0,0,0.9); 
z-index: 1; 
} 

#nav-section .container{ 
height: 600px; 
} 

#nav-section .container ul li{ 
float: left; 
} 

在此先感謝。

Answer 1

使#nav-section .container具有相對位置或絕對位置，並且z-index高於疊加層。

Answer 2

使用z-index。

給＃nav-section .container z-index高於你想讓他覆蓋的div。