title: css positioning (z-index) element behind element
body: <p>I'm trying to make the following html/css layout:</p>
  
  <p><a href="http://siteique.com/uploads/1.png" rel="nofollow noreferrer">http://siteique.com/uploads/1.png http://siteique.com/uploads/1.png</a> .</p>
  
  <p>My problem is with the blue lines behind the main <code>div</code>.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;!-- blue line 1 --&gt;
      &lt;div style="width:100%; height:60px; background-color:#81b7ff; position:absolute; top:385px; z-index:1; float:left;"&gt;&lt;/div&gt;
  
      &lt;div id="site"&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
          &lt;!-- blue line 2 --&gt;
          &lt;div style="position:relative; bottom:0px; height:200px; width:100%; z-index:1;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that if I make the <code>#site</code> <code>div</code> <code>position:absolute</code> and <code>z-index:2</code> the <code>#footer</code> won`t be in the position I want.</p>
  
  <p>So what is the trick I need?</p>
  
  <p>I'm trying to position the blue <code>div</code>'s behind the white <code>div</code> <code>#site</code></p>