谷歌浏览器不尊重z-index

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,bottom,等.

Answer 2

没有可查看的链接，很难看出可能是什么问题。

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

祝你好运！

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 值大于“第一个容器”。

这样做的原因是 Chrome 始终在强制溢出的容器内强制执行边界，即使其后继之一可能具有固定位置。
我想你可以找到一个扭曲的逻辑......我不能 - 因为使用固定位置的唯一原因是启用'on-top-of-every'行为。
所以错误是...