how can i bring content over the overlay? - CSS issue

[zpiderboi]

The div tag has a background image and i wanna put the overlay on the main tag's background-image and the rest of contents over both of them. But The following code will put the overlay tag over the conent.HTML:\[code\]<div id="nav-section"> <div class="overlay"></div> <div class="container"> <p>test</p> <h5>test</h5> </div></div>\[/code\]CSS:\[code\]#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;}\[/code\]Thanks in advance.