Question

I have an issue with nested z-indexes on Firefox, and probably other browsers too, where i have a div with a z-index of 30000 sitting below a label with a zindex of 9000. I thought this was caused by the div with the 30000 z-index sitting inside a div with a 2000 s-index, but I removed this and it had no effect.

Is there anything obvious here that would cause this problem?

<div class="field row olabel end_date">    
    <label for="cc_end_year" generated="true" class="error">* required</label>    
</div>

Further down in my markup, I have a popup message that is shown/hidden on rollover of a piece of text.

<div class="field row olabel">
   <div style="display:none;" class="whats_this_popup"></div>
</div>

My CSS:

#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;
}

Answer 1

This is caused by stacking context. The stacking context of the former div has z-index 9000, while the stacking context of the latter has z-index 2000.

You are giving the label a z-index of 9001 within its parent only. The z-index is meaningless outside of the stacking context of the parent. Similarly, by specifying a z-index of 30000 for .whats_this_popup, you are saying that it will show in front of any of its siblings that have a z-index less than 30000, not anything on the page that has z-index < 30000.

Giving the latter containing div an index of 30000 will lead to your desired results.