一尘不染

Z索引不适用于绝对位置

css

我打开控制台(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这样的警告框


阅读 265

收藏
2020-05-16

共1个答案

一尘不染

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

您需要定位(将位置属性设置为,而不是在这种情况下static可能需要的其他位置relative)要分配给的任何内容z-index

2020-05-16