title: nested z-index issue on Firefox with higher z-index behing lower z-index
body: <p>I have an issue with nested z-indexes on Firefox, and probably other browsers too, where i have a <code>div</code> with a z-index of 30000 sitting below a <code>label</code> with a zindex of 9000. I thought this was caused by the div with the 30000 z-index sitting inside a <code>div</code> with a 2000 s-index, but I removed this and it had no effect.</p>
  
  <p>Is there anything obvious here that would cause this problem?</p>
  
  <pre><code>&lt;div class="field row olabel end_date"&gt;    
      &lt;label for="cc_end_year" generated="true" class="error"&gt;* required&lt;/label&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Further down in my markup, I have a popup message that is shown/hidden on rollover of a piece of text. </p>
  
  <pre><code>&lt;div class="field row olabel"&gt;
     &lt;div style="display:none;" class="whats_this_popup"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#order_form .row.end_date {
     position: relative;
     z-index: 9000;
  }    
  label.error {
     z-index: 9001;
  }
  .whats_this_popup {
     left: 360px;
     padding: 20px;
     position: absolute;
     width: 205px;
     z-index: 30000;
  }
  #order_form .row {
     width: 435px;
     z-index: 2000;
  }
  </code></pre>