我如何将内容带到叠加层上？ - 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。