[解決済み] z-indexがposition absoluteで機能しない

質問

コンソール(chromefirefox)を開き、以下の行を実行しました。

$("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のようなアラートボックスを作成することです。

どのように解決するのですか？

2つ目のdivは position: static (デフォルト)なので、z-indexは適用されません。

位置決め（position プロパティを static を使用したい場合、おそらく relative を与えたい場合、この場合は z-index になります。