Z-Index funktioniert nicht mit Position absolut

Ich habe die Konsole (chrome \ firefox) geöffnet und die folgenden Zeilen ausgeführt:

$("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>");

Der #popupContent sollte vor allem aber von der #popupFrame-Opazität beeinflusst werden.

Der Inhalt ist nicht in #popupFrame enthalten, was dies sehr seltsam macht.

Das Ziel ist es, eine Firefox-ähnliche Alarmbox zu erstellen

Ich freue mich über jede Hilfe.

Danke im Voraus.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage