z-индекс не работает с абсолютной позицией

Я открыл консоль (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 как окно оповещения

Я буду признателен за любую помощь.

Заранее спасибо.