title: z-index stacking on fixed divs doesn't seem to work
body: <p>I can't work out why this z-index isn't working on my page.</p>
  
  <p>Here is a working example: <a href="https://jsfiddle.net/daeyqv31/" rel="nofollow">https://jsfiddle.net/daeyqv31/</a></p>
  
  <pre><code>#login_modal_wrapper {
    background: #eee;
    background: red;/*rgba(0,0,0,0.7);*/
    width: 100%; height: 100%;
    position: fixed; top: 0; left: 0;
    z-index: 10003;
  }
  
  #login_modal {
    z-index: 10002;
    background: #eee;
    border: 2px solid #092834;
    border: 2px solid rgba(9,40,52,0.6);
    border-radius: 20px;
    width: 700px;
    height: 240px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -120px;
  }
  #login_modal_wrapper.over {
      z-index: 100003; // this needs to go OVER login_modal
  }
  #ajax_spinner {
    width: 34px;
    height: 34px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -17px;
    margin-top: -17px;
    z-index: 200000;
  }
  </code></pre>
  
  <p>However, I then also want to be able to force the <code>#login_modal_wrapper</code> div to go <strong>OVER</strong> <code>#login_modal</code>. So, I've got this (just a basic example);</p>
  
  <p><a href="https://jsfiddle.net/daeyqv31/1/" rel="nofollow">https://jsfiddle.net/daeyqv31/1/</a></p>
  
  <p>So this:</p>
  
  <pre><code>&lt;div id="ajax_spinner"&gt;
      loading icon
  &lt;/div&gt;
  &lt;div id="login_modal_wrapper"&gt;
    &lt;div id="login_modal"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>becomes:</p>
  
  <pre><code>&lt;div id="ajax_spinner"&gt;
      loading icon
  &lt;/div&gt;
  &lt;div id="login_modal_wrapper" class="over"&gt;
    &lt;div id="login_modal"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...yet the z-index doesn't seem to be honored (it still shows <code>#login_modal</code> on the top, when it should in fact be behind <code>#login_modal_wrapper</code></p>
  
  <p><strong>UPDATE:</strong> As commented on below, there is no way to apply a <em>higher</em> z-index to a div that is a parent. To get around this, I just jiggled the HTML around a little:</p>
  
  <pre><code>&lt;div id="ajax_spinner"&gt;&lt;img src="/images/new/ajax-loader.gif" /&gt;&lt;/div&gt;
  &lt;div id="login_modal"&gt;&lt;/div&gt;
  &lt;div id="login_modal_wrapper"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This now works exactly as expected :)</p>