title: Div overlapping
body: <p>I am trying to create two <code>&lt;div&gt;</code>'s that overlap. The only problem is that the second <code>&lt;div&gt;</code> is in front of the first <code>&lt;div&gt;</code> and it has to be the other way around.  I've tried setting the z-index of the first <code>&lt;div&gt;</code> to <code>1</code> but it still does not work.</p>
  
  <p>Here is my code:</p>
  
  <pre><code> #content{
  background-color:pink;  
  overflow:auto;
  position:relative;
  
  }
  #content_1{
  
  width:400px;
  height:1600px;
  background-color:#000099;
  margin:0 auto;
  z-index:1;
  }
  nav{
  
  width:300px;
  height:500px;
  background-color:yellow;
  
  
  position:absolute;
  top:0;  
  right:200px;
  z-index:0;
  
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div id="container"&gt;
  
    &lt;header&gt; &lt;/header&gt;
  
     &lt;div id="content"&gt;
         &lt;div id="content_1"&gt;&lt;/div&gt;
         &lt;nav&gt;&lt;/nav&gt;
   &lt;/div&gt;
  
    &lt;footer&gt;&lt;/footer&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>How can I make the first div overlap the second?</p>