Html z-index 不适用于绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14483589/
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
z-index not working with position absolute
提问by Gal Ziv
I opened the console (chrome\firefox) and ran the following lines:
我打开控制台（chrome\firefox）并运行以下几行：
$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");
The #popupContent should be above all but it's affected by the #popupFrame opacity.
#popupContent 应该是最重要的，但它受 #popupFrame 不透明度的影响。
The content is not contained in #popupFrame what makes this very weird.
内容不包含在 #popupFrame 中，这使得这非常奇怪。
The goal is to create firefox like alert box
目标是创建类似于警报框的 firefox
回答by Quentin
The second div is position: static(the default) so the z-index does not apply to it.
第二个 div 是position: static（默认值），因此 z-index 不适用于它。
You need to position (set the position property to anything other than static, you probably want relativein this case) anything you want to give a z-indexto.
您需要定位（将 position 属性设置为除 之外的任何内容static，relative在这种情况下您可能需要）任何您想要给 az-index的内容。
回答by RhinoWalrus
Opacity changes the context of your z-index, as does the static positioning. Either add opacity to the element that doesn't have it or remove it from the element that does. You'll also have to either make both elements static positioned or specify relative or absolute position. Here's some background on contexts: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
不透明度会改变 z-index 的上下文，静态定位也是如此。要么为没有它的元素添加不透明度，要么从有它的元素中删除它。您还必须使两个元素都静态定位或指定相对或绝对位置。这里有一些关于上下文的背景：http: //philipwalton.com/articles/what-no-one-told-you-about-z-index/
回答by steven35
Old question but this answer might help someone.
老问题，但这个答案可能对某人有所帮助。
If you are trying to display the contents of the container outside of the boundaries of the container, make sure that it doesn't have overflow:hidden, otherwise anything outside of it will be cut off.
如果您试图在容器边界之外显示容器的内容，请确保它没有overflow:hidden，否则将切断它之外的任何内容。
回答by superconnected
z-indexonly applies to elements that have been given an explicit position. Add position:relativeto #popupContent and you should be good to go.
z-index仅适用于已给出明确位置的元素。添加position:relative到#popupContent，你应该很高兴。
