如何在叠加层上播放内容？ - CSS问题

Question

div标签有一个背景图片，我想把叠加层放在主标签的背景图像上，其余的内容放在它们上面。但是下面的代码会将叠加标记放在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。