title: Make child div in back of parent div with z-index?
body: <p>No matter what I try, the child div is always in front of the parent. Is there a way to make the child div in back of the parent? z-index doesn't seem to work.</p>
  
  <p>Notes :</p>
  
  <ol>
  <li><p>I don't want to change the html</p></li>
  <li><p>parent must have a z-index</p></li>
  <li><p>duplicate "How to make child element upper than parent with z-index" doesn't make grammatical sense and is hard to read, and didn't really help me.</p></li>
  </ol>
  
  <p><br/></p>
  
  <pre><code>&lt;div id='parent'&gt;
      &lt;div id='child'&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #parent {
      width:50px;
      height:50px;
      background:red;
      position:absolute;  
      z-index:100;
  }
  
  #child {
      width:50px;
      height:50px;
      background:blue;
      position:absolute;  
      z-index:-100;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/foreyez/j6e9qho3/" rel="nofollow">JSFiddle</a></p>