html - z-index not working with position absolute

Question

I opened the console (chromefirefox) and ran the following lines:

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

The #popupContent should be above all but it's affected by the #popupFrame opacity.

The content is not contained in #popupFrame what makes this very weird.

The goal is to create firefox like alert box

Answer 1

The second div is position: static (the default) so the z-index does not apply to it.

You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.