z-index不适用于绝对位置

我打开了控制台（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>"); 

＃popupContent应该是最重要的，但它受#popupFrame不透明度的影响。

内容不包含在＃popupFrame里，这很奇怪。

目标是创build类似于警报框的Firefox

我会很感激任何帮助。

提前致谢。

Answer 1

第二个div是position: static （默认），所以z-index不适用于它。

你需要定位（将位置属性设置为除static以外的任何东西，你可能想要在这种情况下relative ）任何你想给z-index的东西。

Answer 2

不透明度会改变z-index的上下文，静态定位也是如此。 将不透明度添加到没有它的元素或将其从元素中删除。 您还必须将这两个元素静态定位或指定相对或绝对位置。 这里是关于上下文的一些背景： http : //philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 3

z-index只适用于已经被赋予明确位置的元素。 添加position:relative对于#popupContent，你应该很好走。