El índice z no funciona con la posición absoluta

Abrí la consola (chrome \ firefox) y corrí las siguientes líneas:

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

El #popupContent debe estar por encima de todo, pero se ve afectado por la opacidad #popupFrame.

El contenido no está contenido en #popupFrame, lo que hace que esto sea muy extraño.

El objetivo es crear Firefox como un cuadro de alerta.

Apreciaré cualquier tipo de ayuda.

Gracias por adelantado.

Respuestas a la pregunta(4)

Su respuesta a la pregunta