问题
I use jQuery to make a div apear, when i click onto a button -> the background should get a opacity of 0.8 and the appeared div will allow the user to let him login - everythings alright when i don't use z-index, but i have 4 divs (header, content, footer, and the div with login-Form) header must have z-index:3 and content z-index:2 - otherwise the shadows won't work as expected.
With jQuery i add a div after the body tag which contains the full side - so i can set the opacity, but then i have to set the z-index for the form-div higher than the one for the div with opacity - but it doesn't work. z-index of the form-div is 999, the other div has 5
Any workarounds or something for z-index?
回答1:
Change the position of the element.
position: relative;
回答2:
You need to do something about the parent-element.
overflow: visible;
That would do you.
回答3:
Old question but I'll post anyway if someone else comes looking for a solution.
z-index is not as simple as it may sound. Making z-index on element1=999 and on element2=1 doesn't always mean the element1 is going to be in front.
I had a similar situation once, and I changed the z-index with jQuery when I needed the element to be in front, and it worked fine. This means that z-index cares about the time WHEN you gave it that index. If you want to give it a value of 999, give it right at the moment when you want it to be up front. This might make it stay on top, but other rules might still apply, namely: stacking order. This is quite large topic to cover here, so I'll just point you here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
回答4:
You need make sure position is defined in your CSS.
if you want z-index to be implemented to the regular element of HTML then add position:relative to your element.
来源：https://stackoverflow.com/questions/13091305/z-index-doesnt-work