title: how to set div to show at the bottom of the page
body: <p>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</p>
  
  <pre><code>* {
    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;
  }
  
  &lt;header&gt;
    &lt;div class="top_nav"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="container"&gt;
    &lt;img src="http://www.100resilientcities.org/page/-/100rc/img/blog/rsz_resilientcity_headphoto.jpg"&gt;
    &lt;div id="short-des"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="details"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/VJHJN.jpg" alt="enter image description here"></p>