Html z-index 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13091305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index doesn't work?
提问by Julie Nesh
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.
我使用 jQuery 制作一个 div，当我点击按钮时 -> 背景的不透明度应该为 0.8，出现的 div 将允许用户让他登录 - 当我不使用 z-index 时一切正常，但我有 4 个 div（页眉、内容、页脚和带有登录表单的 div）页眉必须有 z-index:3 和 content z-index:2 - 否则阴影将无法按预期工作。
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
使用 jQuery，我在包含完整边的 body 标签之后添加了一个 div - 这样我就可以设置不透明度，但是我必须将 form-div 的 z-index 设置为高于具有不透明度的 div 的 z-index - 但它不起作用。form-div 的 z-index 为 999，另一个 div 为 5
Any workarounds or something for z-index?
任何解决方法或 z-index 的东西？
回答by Austin Brunkhorst
Change the position of the element.
改变元素的位置。
position: relative;
回答by steveluoxin
You need to do something about the parent-element.
您需要对父元素做一些事情。
overflow: visible;
溢出：可见；
That would do you.
那会做你的。
回答by GotBatteries
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.
z-index 并不像听起来那么简单。在 element1=999 和 element2=1 上制作 z-index 并不总是意味着 element1 会在前面。
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/
我曾经遇到过类似的情况，当我需要将元素放在前面时，我使用 jQuery 更改了 z-index，并且效果很好。这意味着 z-index 关心你给它那个索引的时间。如果你想给它一个 999 的值，就在你希望它出现在前面的那一刻给它。这可能会使其保持在顶部，但其他规则可能仍然适用，即：堆叠顺序。这是一个相当大的话题要在这里讨论，所以我只是在这里指出你：http: //philipwalton.com/articles/what-no-one-told-you-about-z-index/
回答by Murali Krishna
You need make sure positionis defined in your CSS.
if you want z-indexto be implemented to the regular element of HTML then add position:relativeto your element.
您需要确保position在您的 CSS 中定义。如果你想z-index被实现到 HTML 的常规元素然后添加position:relative到你的元素中。
