z-index 铬错误答案

【问题标题】：z-index chrome bugz-index 铬错误
【发布时间】：2012-10-22 20:18:30
【问题描述】：

我遇到了一个似乎只发生在 Windows 和 OS X 上的非常烦人的错误：父元素位置固定的元素的 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/

我在 OS X 和 Windows 上的 Internet Explorer 9、Firefox 15、Opera 12.02 和 Safari 5.1.7 上进行了测试，所有这些都按预期显示。我还在 Ubuntu 12.10 上进行了测试，它适用于包括 Chrome 在内的所有浏览器！我什至在 Kindle 4 浏览器上进行了测试，它工作正常！

我想知道是否有人知道解决此问题的任何方法！

【问题讨论】：

实际上，在 ff 16.0.1 上它也没有按预期显示......
@LorDex 您在哪个操作系统中进行了测试？使用 Firefox 16.0.1 在 Ubuntu 和 Windows 上一切正常！

标签： css google-chrome z-index

【解决方案1】：

one800higgins 的回答是正确的。真正的答案是on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto。所以堆栈上下文层次结构如下所示：

文档根目录 (z-index 0)
- #mask (z-index 9998)
- #box (z-index 0)
  - .above-mask (z-index 9999)
  - .below-mask (z-index 9997)

这意味着9998 永远不会与9999 或9997 进行比较以确定堆叠顺序。相反，9999 与9997 进行比较以确定.above-mask 和.below-mask 中的哪一个更靠前，然后一旦#box 内的所有内容都在该上下文中堆叠，它在z-处被视为单层索引0 在z-index 9998 处堆叠在#mask 后面。

这也解释了为什么@TheNextBillGates 将#mask 移动到#box 中的答案有效——因为那时#mask 与.above-mask 和.below-mask 处于相同的堆叠上下文中。我强烈推荐上面的链接以获得更全面的细节，你也应该看到the announcement for the stacking change for fixed elements in Chrome。

【讨论】：

很好的解释，感谢您的链接。这不是我一直认为的错误！你让我开心。

【解决方案2】：

我刚刚发现了这个错误，它仍然在 Google Chrome v26 中发生。我可以通过代码或 Chrome 的 CSS 编辑器将 z-index 设置为我想要的任意高，这没有任何区别（并且元素的位置设置为绝对位置）。相同的 z-index 设置在 Firefox 甚至 IE8-IE10 中按预期工作。当我将父元素从 position:fixed 切换到 position:absolute 时，子元素的 z-index 在 Chrome 中运行良好。

【讨论】：

【解决方案3】：

如果您将#mask 移动到#box 内，它就可以正常工作。

<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>

这是一个小提琴http://jsfiddle.net/TheNextBillGates/jKm4b/

还不知道为什么会这样。

【讨论】：

【解决方案4】：

为您的固定 div 分配一个 z-index。这应该会导致 chrome 也尊重所有子级的 z-index 值。

【讨论】：

【解决方案5】：

在我看来，多个 z-index 堆栈令人遗憾且令人困惑，但是如果您提高任何目标元素的父元素的 z-index，您可能能够在不更改 html 结构的情况下解决这个问题。尝试找到一个父元素，它是与您的内容重叠的麻烦元素的兄弟。应用此样式：

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

您的里程可能会因您的项目而异，但此解决方案适用于我的项目。

【讨论】：

【解决方案6】：

我认为这是因为它不像模态窗口那样位于页面底部。简单的解决方法是抓住所有模态窗口并将它们放入结束正文标记之前的 div 中。下面的示例修复了我遇到的每个 chrome 问题。

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

【讨论】：

这将是一种解决方法，不得不恢复到 js 来解决它并不是很好，我对 z-index 堆栈问题的解决方案更感兴趣，但正如公认的答案指出的那样，我试图实现的目标是错误的。

【解决方案7】：

更改或删除#box 上的position: fixed，然后您就设置好了。

jsFiddle

【讨论】：

不幸的是，因为我项目中的#box div 实际上是一个粘性菜单，这就是它具有固定位置的原因，而这一切的想法是在引导中突出显示菜单中的一个项目游览。
移除 'position:fixed' 不会有任何好处，因为 mask div 是半透明的。
检查我发布的 jsFiddle... 删除 position: fixed 是我所做的一切，而且效果很好。透明度与它无关......您可以将它们设置为纯色并自己查看。
对不起@one800higgins 但它没有任何意义，如果我将#box 设置为位置relative 或absolute 它工作得很好，为什么只有fixed 是就这样被诅咒了？
@gibatronic 我也在尝试解决这个问题。我认为它在固定元素和绝对元素之间的行为相同，但由于某种原因使其成为固定元素会导致这种行为。