Best IT Recipes

Z-index does not work with absolute position

I opened the console (chrome \ firefox) 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>");

#popupContent should be the highest, but it is affected by the opacity of #popupFrame.

Content is not contained in #popupFrame, which makes it very strange.

The goal is to create a Firefox error warning window.

I would be grateful for any help.

Thanks in advance.

+61
html css
Jan 23 '13 at 15:47
source share
3 answers

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

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

+140
Jan 23 '13 at 15:50
source share

Opacity changes the context of your z-index, as does static positioning. Either add opacity to the element that does not have it, or remove it from the element that does it. You will also have to either make the static positions of both elements, or specify a relative or absolute position. Here is some background in contexts: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

+24
Jan 23 '13 at 15:49
source share

z-index applies only to elements that have been given an explicit position. Add position:relative to #popupContent and you should be good to go.

+17
Jan 23 '13 at 15:51
source share


More articles:


All Articles