z-index não funciona com posição absoluta

Eu abri o console (chrome \ firefox) e corri as seguintes linhas:

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

O #popupContent deve estar acima de tudo, mas é afetado pela opacidade #popupFrame.

O conteúdo não está contido no #popupFrame, o que torna isso muito estranho.

O objetivo é criar o firefox como caixa de alerta

Eu aprecio qualquer tipo de ajuda.

Desde já, obrigado.

questionAnswers(4)

yourAnswerToTheQuestion