谷歌浏览器不尊重 z-index

Question

根据标题，似乎只有 Chrome 不支持。请注意，无法单击屏幕左侧的表单字段。这只发生在某些页面上（例如联系人页面）。 #left_outer div 似乎覆盖了内容。当我通过 Firebug 或 Chrome 的开发工具编辑 css 时，它可以工作，当我编辑实际的 css 并刷新时，它不会。

有什么想法吗？

链接：

谢谢！

Answer 1

Google Chrome 到 84.0.4147.135（官方版本）（64 位）2020-02-22。

自从我上次更新以来，Chrome 中的 CSS 元素 z-index 已损坏。

Chrome 添加了“z-index: 1;”到 BODY 元素。

它现在错误地显示所有 z-index: ?; BODY 子元素中的值。

设置位置，BODY的z-index并不能解决问题。 更改已经正确的子元素的 z-index 值没有帮助。

我希望这个问题能得到解决，它只是在我更新 Chrome 后才被破坏。

www.eatme.pro/music 上的 Chrome 84.0.4147.135 错误 - 屏幕小于 500 像素 - 推送播放 - 出现底部栏 #lblBottomBarLink，z-index 5 显示在 z-index 2 的菜单下

（见图）

image eatme.pro/music in Chrome 84.0.4147.135 with z-index 5 under z-index 2

Answer 2

通常当您设置了z-index 属性，但事情并没有像您预期的那样工作时，它与position 属性有关。

为了使z-index 正常工作，需要对元素进行“定位”。这意味着它必须将position 属性设置为absolute、relative 或fixed 之一。

请注意，如果您使用 position: absolute 和 top、left、right、bottom 等，您的元素也将相对于定位的第一个祖先进行定位。

Answer 3

Markt 的答案（见第一个答案）很棒，这是 z-index 属性的“定义”。
Chrome 的具体问题通常与顶部容器底部的溢出属性有关。 因此，对于以下内容：

<div class="first-container">...</div>
<div class="second-container">
    <div ...>
         <div class="fixed-div> some text</div>
    <... /div>
</div>

和样式：

.first-container {
    position:relative;
    z-index: 100;
    width: 100%;
    height: 10%;
}

.second-container {
    position:relative;
    z-index: 1000;
    width: 100%;
    height: 90%;
    overflow: auto;
}

.fixed-div {
    position: fixed;
    z-index: 10000;
    height: 110%;
}

实际上会发生以下情况（仅限 Chrome，firefox 按预期工作）
'fixed-div' 在 'first-container'之后，即使'fixed-div' 及其容器（'second-container'）的z-index值都大于'first-容器'。

这样做的原因是 Chrome 总是在一个强制溢出的容器内强制边界，即使它的后继之一可能有一个固定位置。
我想你可以找到一个扭曲的逻辑......我不能 - 因为使用固定位置的唯一原因是启用“在一切之上”的行为。
所以bug它是......

Answer 4

我在 Chrome 上的 zIndex 遇到了一个奇怪的问题，我一直在摆弄 position 属性以查看是否有任何效果。但是，它没有。事实证明，就我而言，问题出在 transform 属性上。所以，如果你有一个 transform 属性，禁用它应该没问题。其他浏览器可以很好地处理类似的内容，但 Chrome 的播放方式似乎有所不同。

希望这对您有所帮助。

Answer 5

我知道这已解决，但发布的解决方案对我不起作用。这是解决我的问题的方法：

<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function clientShown(ctl, args) {
        ctl._completionListElement.style.zIndex = 99999;
    }
</script> 

Answer 6

如果没有可查看的链接，很难看出问题所在。

您是否在任何地方都有z-index: -1;（负数是这里的关键，与数字无关）？ 我过去发现这会导致容器无效。

祝你好运！