8

我遇到了一个非常烦人的错误，它似乎只发生在 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 浏览器上进行了测试，它工作正常！

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

4

7 回答 7

13

one800higgins 的答案是正确的。真正的答案是，在移动 WebKit 和 Chrome 22+ 上，position: fixed总是会创建一个新的堆叠上下文，即使z-index是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-index 的单层，然后堆叠在 z-index0的后面。#mask9998

这也解释了为什么@TheNextBillGates 的移动#mask内部#box工作的答案 - 因为 then与and#mask处于相同的堆叠上下文中。我强烈推荐上面的链接以获得更全面的详细信息，您还应该看到Chrome 中元素堆叠更改的公告。.above-mask.below-maskfixed

于 2013-09-06T23:58:40.167 回答
1

如果你移动它的#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/

不知道为什么会这样。

于 2013-08-31T08:07:12.400 回答
1

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

于 2013-04-24T20:46:33.947 回答
0

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

于 2013-09-05T18:17:22.483 回答
0

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

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

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

于 2013-10-11T22:15:18.937 回答
0

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

$('body').append('<div id="modelContainer" />');
$('.modal').each(function() {
  $(this).appendTo('#modelContainer');
})
于 2016-07-05T15:29:05.337 回答
-1

更改或删除position: fixedon #box，就可以了。

jsFiddle

于 2012-10-22T20:41:02.427 回答