Z-index chrome bug

Question

I am experiencing a very annoying error that seems to occur only on Windows and OS X: the z-index of an element whose parent has a fixed position does not work in Chrome! I converted my strange situation to simple code:

HTML:

<div id="mask"> &nbsp; </div> <div id="box"> <div class="below-mask circle"> should be below the mask </div> <div class="above-mask circle"> should be above the mask </div> </div>​ 

CSS

 body { font-family: Verdana; font-size: 9px; margin: 0px; } #box { position: fixed; } #mask { position: absolute; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; z-index: 9998; } .circle { position: relative; background-color: rgba(255, 204, 0, 0.75); border-radius: 75px; line-height: 150px; margin: 50px; text-align: center; width: 150px; height: 150px; } .above-mask { z-index: 9999; } .below-mask { z-index: 9997; }​ 

sandbox: http://jsfiddle.net/gibatronic/umbgp/

I tested in Internet Explorer 9, Firefox 15, Opera 12.02, and Safari 5.1.7 on OS X and Windows, and they all displayed as expected. I also tested Ubuntu 12.10 and it worked perfectly for every browser, including Chrome! I even tested in the Kindle 4 browser and it works!

I wonder if anyone knows any solution to fix this problem?

Answer 1

one800higgins answers along the right lines. The real answer is that on mobile WebKit and in Chrome 22+, position: fixed always creates a new stacking context, even if z-index is auto . Thus, the hierarchy of the context of the stacks is as follows:

• document root (z-index 0 )
  • #mask (z-index 9998 )
  • #box (z-index 0 )
    • .above-mask (z-index 9999 )
    • .below-mask (z-index 9997 )

This means that 9998 never compared with 9999 or 9997 to determine the stacking order. Instead, 9999 compared to 9997 to determine which of .above-mask and .below-mask is in front, and then when everything inside #box fits into this context, it is treated as a single layer in z-index 0 , which is added for #mask at z-index 9998 .

This also explains why @TheNextBillGates response to moving #mask inside #box because then #mask is in the same stacking context as .above-mask and .below-mask . I highly recommend the link above for more details, and you should also see a stack change announcement for fixed elements in Chrome .

Answer 2

I just stumbled upon this error and it still happens in Google Chrome v26. I could set the z-index as high as I would like from the Chrome CSS code or editor, and that didn't matter (and the position of the element was set to absolute). The same z-index option worked as expected in Firefox and even IE8-IE10. When I switched the parent from position: fixed to position: absolute, then the z-index of the child worked fine in Chrome.

Answer 3

If you move #mask inside #box , it works fine.

 <div id="box"> <div id="mask">&nbsp;</div> <div class="below-mask circle">should be below the mask</div> <div class="above-mask circle">should be above the mask</div> </div> 

Here's the script http://jsfiddle.net/TheNextBillGates/jKm4b/

I don’t know why this is so far.

Answer 4

Assign z-index to your fixed div. This should make chrome respect z-index values ​​for all of its children.

Answer 5

A lot of stacks with z-indices, in my opinion, are unsuccessful and confusing, however you can solve this without changing the html structure if you raise the z-index of any of the parents of the target element. Try to find a parent element that is a relative of a complex element that overlaps your content. Apply this style:

 position: relative; z-index: [# higher than overlapping element z-index]; 

Your participation may vary depending on your project, however this solution worked for my project.

Answer 6

I think this is because it is not what the bottom of the page, like modal windows, should be. A simple fix is ​​to just grab all the modal windows and drop them into the div before the body tag. The example below fixes every problem with chrome that I have.

 $('body').append('<div id="modelContainer" />'); $('.modal').each(function() { $(this).appendTo('#modelContainer'); }) 

Answer 7

Change or remove position: fixed to #box and you will install.

jsFiddle