CSS 谷歌浏览器不尊重 z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6365448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chrome not respecting z-index
提问by vulgarbulgar
As per the title, it seems only Chrome isn't playign along. Note that form fields cannot be clicked on which are on the left portion of the screen. This only occurs on some pages (such as the Contact page). It appears that the #left_outer div is overlaying the content. When I edit the css via Firebug or Chrome's dev toools, it works, when I edit the actual css and refresh, it does not.
根据标题，似乎只有 Chrome 不适合玩。请注意，无法单击屏幕左侧的表单字段。这仅发生在某些页面上（例如联系页面）。看来#left_outer div 覆盖了内容。当我通过 Firebug 或 Chrome 的开发工具编辑 css 时，它可以工作，但当我编辑实际的 css 并刷新时，它不会。
Any ideas?
有任何想法吗？
LINK:
关联：
Thanks!
谢谢！
回答by markt
Usually when you have set the z-indexproperty, but things aren't working as you might expect, it is related to the positionattribute.
通常，当您设置了z-index属性，但事情并没有像您预期的那样工作时，它与position属性有关。
In order for z-indexto work properly, the element needs to be "positioned". This means that it must have the positionattribute set to one of absolute, relative, or fixed.
为了z-index正常工作，元素需要被“定位”。这意味着它必须具有position的属性设置为一个absolute，relative或fixed。
Note that your element will also be positioned relative to the first ancestor that is positioned if you use position: absoluteand top, left, right, bottom, etc.
请注意，你的元素也将相对于位于始祖如果使用定位position: absolute和top，left，right，bottom，等。
回答by Kate
Without a link to look at, it's a bit tough to see what the problem might be.
没有可查看的链接，很难看出可能是什么问题。
Do you have a z-index: -1;anywhere (a negative number is the key here, doesn't matter the number)?
I have found in the past this renders the container void from being interacted with.
你有z-index: -1;任何地方吗（负数是这里的关键，与数字无关）？我在过去发现这会使容器无法与之交互。
Good luck!
祝你好运！
回答by Tomer
Markt's answer (see first answer) is great and this is the "by definition" of the z-index property.
Chrome's specific issue are usually related to the overflow property from the top container bottom.
So, for the following:
Markt 的回答（见第一个回答）很好，这是 z-index 属性的“定义”。
Chrome 的特定问题通常与顶部容器底部的溢出属性有关。因此，对于以下情况：
<div class="first-container">...</div>
<div class="second-container">
<div ...>
<div class="fixed-div> some text</div>
<... /div>
</div>
And styles:
和样式：
.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%;
}
the following actually happens (Chrome only, firefox works as expected)
The 'fixed-div' is behindthe 'first-container', even though both 'fixed-div' and its container's ('second-container') z-index value is greater than 'first-container'.
The reason for this is Chrome always enforce boundaries within a container that enforces overflow even thoughone of its successors might have a fixedposition.
I guess you can find a twisted logic for that... I can't - since the only reason for using fixed position is to enable 'on-top-of-everything' behavior.
So bug it is...
以下实际发生（仅 Chrome，firefox 按预期工作）
“fixed-div”位于“first-container”后面，即使“fixed-div”及其容器的（“second-container”）z-index 值大于“第一个容器”。
这样做的原因是 Chrome 始终在强制溢出的容器内强制执行边界，即使其后继之一可能具有固定位置。
我想你可以找到一个扭曲的逻辑......我不能 - 因为使用固定位置的唯一原因是启用'on-top-of-every'行为。
所以错误是...
回答by Anoop Santhanam
I had a weird issue with zIndex on Chrome and I kept fiddling with the position attribute to see if anything worked. But, it didn't. Turns out, in my case, the issue was with the transform attribute. So, if you have a transform attribute in place, disable it and it should be fine. Other browsers work fine with stuff like that, but Chrome seems to play it differently.
我在 Chrome 上的 zIndex 有一个奇怪的问题，我一直在摆弄位置属性，看看是否有任何工作。但是，它没有。事实证明，就我而言，问题出在 transform 属性上。所以，如果你有一个转换属性，禁用它应该没问题。其他浏览器可以很好地处理类似的东西，但 Chrome 的播放方式似乎有所不同。
Hope this helped you.
希望这对你有帮助。
回答by cinek
I know this is now resolved but posted solution didn't work for me. Here is what resolved my problem:
我知道现在已经解决了，但发布的解决方案对我不起作用。这是解决我的问题的方法：
<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>
