Problem
I used Chromefirefox to enter the console and typed the following commands:
$("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 take precedence, however the #popupFrame opacity has an impact.
This is strange because the material isn’t contained in the #popupFrame.
The goal is to make an alert box that looks like it belongs in Firefox.
Asked by Gal Ziv
Solution #1
The z-index does not apply to the second div because it is set to static (the default).
Anything you want to provide a z-index to must be positioned (change the position property to anything other than static; you’ll presumably want relative in this case).
Answered by Quentin
Solution #2
This is an old question, but the response may be useful to someone.
If you want to see the contents of a container outside of the container’s bounds, make sure it doesn’t have overflow:hidden, or else anything outside of it will be cut off.
Answered by steven35
Solution #3
Opacity changes the context of your z-index, as does the static positioning. Either give the element that doesn’t have it opacity or take it away from the element that does. You’ll also have to choose between making both items static or specifying relative or absolute positioning. Here’s some background on contexts: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Answered by RhinoWalrus
Solution #4
Only elements with an explicit position are affected by the z-index. You should be fine to go after adding position:relative to #popupContent.
Answered by superconnected
Solution #5
When I used position: absolute;, I had a lot of problems. When I used position: relative in the child element, I had a lot of problems. You don’t need to modify the position: absolute to relative; all you have to do is add the child element. Take a look at the following two examples:
Answered by Ericgit
Post is based on https://stackoverflow.com/questions/14483589/z-index-not-working-with-position-absolute