Div Overlapping With Another Div With image - html

Question

I create a menubar and make it transparent and I add an image in my container div to look image behind menubar after this when I create another div it overlapping each other I want second div visible below container div
* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: relative;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.details {
height: 638px;
width: 100%;
position: absolute;
}
<header>
<div class="top_nav"></div>
</header>
<div class="container">
<img src="http://www.100resilientcities.org/page/-/100rc/img/blog/rsz_resilientcity_headphoto.jpg">
<div id="short-des"></div>
</div>
<div class="details"></div>
I want div name detail to show below the container div image
enter image description here

Answer 1

don't use position:absolute on container , but use it on header . so header will stay on top of the container , and details will stay under container
see snippet below or fiddle > jsfiddle
let me know if it helps
*{
margin: 0;
padding: 0;
}
header {
position:absolute;
z-index:100;
width:100%;
height:80px
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.details{
height: 638px;
width: 100%;
position: absolute;
background:red;
}
<header>
<div class="top_nav">
</div>
</header>
<div class="container">
<img src="http://placehold.it/350x150">
<div id="short-des">
</div>
</div>
<div class="details">
</div>