html - z-index 不适用于绝对位置

Question

我打开控制台 (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 中，这让这很奇怪。

目标是创建一个类似 firefox 的警告框。

Answer 1

第二个 div 是 position: static(默认值)，因此 z-index 不适用于它。

您需要定位(将 position 属性设置为 static 以外的任何内容，在这种情况下您可能需要 relative)任何您想要给 z 的内容-index 到。