Question

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

有什么想法吗？

链接：

谢谢！

Answer 1

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

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

请注意，如果您使用position: absolute和top，left，right，{{1}，您的元素也会相对于定位的第一个祖先定位等等。

Answer 2

如果没有链接可以看，问题可能会有点困难。

你在任何地方都有z-index: -1;（负数是关键，这个数字无关紧要）？我在过去发现这使得容器无法与之交互。

祝你好运！

Answer 3

Markt的答案（见第一个答案）很棒，这就是＆＃34;根据定义＆＃34; 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按预期工作）
＆＃39; fixed-div＆＃39; 支持第一个容器＆＃39;，尽管两个＆＃39; fixed-div＆＃39;并且它的容器（＆＃39;第二容器＆＃39;）z-index值大于＆＃39; first-container＆＃39;。

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

Answer 4

我在Chrome上的zIndex有一个奇怪的问题，我一直在摆弄位置属性以查看是否有效。但是，事实并非如此。事实证明，在我的情况下，问题在于transform属性。因此，如果你有一个转换属性，禁用它，它应该没问题。其他浏览器可以正常使用这样的东西，但Chrome似乎以不同的方式播放。

希望这有助于你。

Answer 5

将Google Chrome浏览器升级到84.0.4147.135（正式版）（64位）2020-02-22。

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

Chrome浏览器添加了“ z-index：1;”到BODY元素。

现在错误地显示所有z-index：？;子元素中的值。

设置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 6

我知道现在已经解决但是发布的解决方案对我不起作用。这就解决了我的问题：

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

谷歌浏览器不尊重z-index

6 个答案: