title: Reversing elements html order with z-index
body: <p>I have a <code>div</code> with a nested <code>div</code> inside, and I want to reverse their order of display <strong>without</strong> changing the HTML structure.</p>
  
  <pre><code>&lt;div class="round"&gt;
      &lt;div class="progress"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>At first I gave the inner div a <code>z-index</code> of <code>-1</code> and it worked, but I need it to be over <code>0</code> so I gave it a <code>z-index</code> of <code>1</code> and the parent div <code>2</code>. The problem is that no matter the value of the z-index I give the parent, whenever he has that attribute, the order goes back to normal.</p>
  
  <p>Both divs have <code>position</code> other than <code>static</code> so <code>z-index</code> should effect them.</p>
  
  <pre><code>.round {
      background-color: yellow;
      height: 100px;
      width: 100px;
      border-radius: 50%;
      position: relative;
   /* z-index: 1; adding this reverses the order back to normal */
  }
  
  .progress {
      position: absolute;
      background-color: #6eb348;
      border-radius: 50%;
      top: -4px;
      bottom: -4px;
      left: -4px;
      right: -4px;
      z-index: -1; /* I need this to be higher then 0 */
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ilyaD/JeVA9/4/" rel="nofollow">http://jsfiddle.net/ilyaD/JeVA9/4/</a></p>