css - z-indexクロームバグ

Question

WindowsとOSXでのみ発生するように思われる非常に厄介なバグが発生しています。親の位置が固定されている要素のz-indexはChromeでは機能しません。私は奇妙な状況を単純なコードに変換しました：

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

サンドボックス：http：//jsfiddle.net/gibatronic/umbgp/

OSXとWindowsのInternetExplorer9、Firefox 15、Opera 12.02、Safari 5.1.7でテストしたところ、すべてが期待どおりに表示されました。Ubuntu 12.10でもテストしましたが、Chromeを含むすべてのブラウザーで問題なく動作しました。Kindle 4ブラウザーでテストしたところ、動作しました。

この問題を回避するための修正方法を知っている人はいないでしょうか。

Answer 1

one800higgins's answer is along the right lines. The real answer is that on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto. So the stacking context hierarchy looks like this:

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

That means that 9998 is never compared with 9999 or 9997 to determine stacking order. Instead, 9999 is compared with 9997 to determine which of .above-mask and .below-mask is further in front, and then once everything inside #box is stacked in that context, it's treated as a single layer at z-index 0 which gets stacked behind #mask at z-index 9998.

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

Answer 2

I just came across this bug, and its still happening in Google Chrome v26. I could set the z-index as high as I wanted to from code or Chrome's CSS editor and it made no difference (and the element's position was set to absolute). The same z-index setting was working as expected in Firefox and even IE8-IE10. When I switched the parent element from position:fixed to position:absolute then the child element's z-index worked fine in Chrome.

Answer 3

If you move the #mask inside of the #box it works just 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 a fiddle http://jsfiddle.net/TheNextBillGates/jKm4b/

Not sure why this is just yet.

Answer 4

Assign a z-index to your fixed div. That should cause chrome to respect the z-index values for all it's children as well.

Answer 5

The multiple z-index stacks is unfortunate and confusing in my opinion, however you may be able to solve this without changing your html structure if you raise the z-index of any of the target element's parents. Try to find a parent element that is a sibling of the troublesome element overlapping your content. Apply this styling:

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

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

Answer 6

I think its because its not at the bottom of the page like modal windows are suppose to be. Easy fix is to just grab all of the modal windows and throw them into a div before the ending body tag. Example below fixes every chrome issue i have.

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

Answer 7

を変更または削除するposition: fixedと#box、設定が完了します。

jsFiddle