title: Place an absolute-positioned element behind an relative-positioned element
body: <p>Is it possible to place the absolute-positioned <code>#element</code> behind the relative-positioned <code>#container</code> ID, if the former is a child of the latter ? </p>
  
  <p>In other words, how can I get the red element to be positioned <strong>between</strong> the blue element and the yellow element??</p>
  
  <p><code>z-index</code> doesn't seem to work. </p>
  
  <p><a href="http://jsfiddle.net/s9godfn1/" rel="nofollow"><strong>Example</strong></a> </p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div id="big_container"&gt;
      &lt;div id="container"&gt;
          &lt;div id="element"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>#big_container {
      width:100%;
      height:100%;
      background:yellow;
  }
  #container, #element {
      height:50px;
      width:50px;
  }
  
  #container {
      position:relative;
      z-index:5;
      background:blue;
  }
  
  #element {
      position:absolute;
      z-index:10;
      background:red;
      top:5px;
      left:5px;
  }
  </code></pre>
  
  <p><strong>Updated</strong>.</p>