CSS - z-index 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8302747/
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
CSS - z-index not working properly
提问by laarsk
I'm using z-index on my page ( -link no longer needed- ), and it doesn't work properly: it doesn't place certain divs above all others...
我在我的页面上使用 z-index（-link 不再需要-），但它不能正常工作：它没有将某些 div 放在所有其他 div 之上......
You can see it yourself, by clicking one of the items in the left, or right bar. Then, the mask will fade in, but show the message box, beneath it. I've tried a lot, but I just can't get the message box to show above all others...
您可以通过单击左侧或右侧栏中的项目之一自行查看。然后，遮罩将淡入，但会在其下方显示消息框。我已经尝试了很多，但我无法让消息框显示在所有其他人之上......
What can I do to fix this?[note: 2nd question below!]
我能做些什么来解决这个问题？[注意：下面的第二个问题！]
If you don't want to check the page, the message box is located in some other divs:
如果您不想检查页面，则消息框位于其他一些 div 中：
<div>
<div>
<div>message box</div>
</div>
</div>
The CSS positioning is like this:
CSS 定位是这样的：
.window {
position: fixed;
left: 0px;
top: 0px;
z-index: 100;
}
I use position:fixed, because position:absolute is not absolute here, the div is not aligned to the body, but something else somehow. Is there a way to reset the positioning and absolute position it again?
我使用 position:fixed，因为 position:absolute 在这里不是绝对的，div 没有与 body 对齐，而是以某种方式。 有没有办法再次重置定位和绝对位置？
回答by Boris Delormas
For as long as I can remember, z-index issues often come from the fact than the parents of the z-indexed elements are not positioned. Sibling parents should be positioned.
只要我记得，z-index 问题通常来自于 z-indexed 元素的父元素没有定位的事实。兄弟姐妹的父母应该被定位。
回答by raphie
If you're using jquery check the top Z Index Plug In, you can apply it when the object has a mouse over event like:
如果您使用 jquery 检查顶部 Z 索引插件，您可以在对象具有鼠标悬停事件时应用它，例如：
<div id="modal" onmouseover="$(this).topZIndex();"></div>
Then change the position to absolute with jquery also or viceversa:
然后使用 jquery 将位置更改为绝对位置，反之亦然：
$(document).ready(function(){ $('#modal').css('position','absolute'); });
回答by Michael
if you remove z-index from #leftbar it fixes your problem. The position should not matter, as long as you have one.
如果您从 #leftbar 中删除 z-index 它可以解决您的问题。位置不重要，只要你有。
