css 中的 z-index 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9377029/
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 in css doesn't work
提问by Pave
This div
这个div
<div style="position: relative; z-index: 99;">123</div>
is shown above than this one
上面显示的是这个
<div style="position: fixed; z-index: 3000;">456</div>
When i assign z-index: 98 in first div everything's fine! I can provide more code if needed.
当我在第一个 div 中分配 z-index: 98 时一切都很好！如果需要，我可以提供更多代码。
采纳答案by zeroos
On this fiddle it isn't: http://jsfiddle.net/kcgCX/
在这个小提琴上它不是：http: //jsfiddle.net/kcgCX/
I think it must be something else in your code that changes. it.
我认为您的代码中必须有其他内容发生了变化。它。
回答by Jules
z-index is orienting at it's parent - are they both in the same parent-element? z-index implements an own stack - for example:
z-index 指向它的父元素 - 它们都在同一个父元素中吗？z-index 实现了自己的堆栈 - 例如：
The box D, E, and F are descendant from Box C -> Box F(z-index: -1) overlaid the box B (z-index:1) because it's the descendant from box c (this one is with z-index:3 over box b)
盒子 D、E 和 F 是盒子 C -> 盒子 F(z-index: -1) 覆盖盒子 B (z-index:1) 的后代，因为它是盒子 c 的后代（这个是带有 z-索引：3 超过框 b)
<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
<b>A:2</b>
</div>
<div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
<b>B:1</b>
</div>
<div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3;
border:1px solid #888; background:#eee;">
<b>C:3</b>
<div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;">
<b>D:2</b>
</div>
<div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
<b>E:3</b>
</div>
<div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
<b>F:-1</b>
</div>
</div>回答by J.I.N Kleiss
I think the problem might be that
我认为问题可能是
<div style="position: fixed; z-index: 3000;">456</div>
has the position fixed, according to this site: http://www.kavtheitroad.com/2008/12/css-z-index-doesnt-work.html, z-indexes only work with relative or absolute positions, that's why your other div does work with your z-index.
位置固定，根据这个网站：http: //www.kavtheitroad.com/2008/12/css-z-index-doesnt-work.html，z-indexes 只适用于相对或绝对位置，这就是为什么你的其他 div 确实适用于您的 z-index。
If that's not the case I'd say you did not build up your HTML correctly.
如果情况并非如此，我会说您没有正确构建 HTML。
Hope you find this intel useful.
希望你觉得这个英特尔有用。
回答by Alejandro Silva
Protip: If you have a containersmall enought (Ej. 100px of height), and have a childrenbigger (Ej, 200px), even with z-index well setted, the children won't be fully visible if the container has the property overflow: hidden.
提示：如果你有一个container足够小的（Ej。100px的高度），并且有一个children更大的（Ej，200px），即使 z-index 设置得很好，如果容器有属性overflow: hidden，孩子们也不会完全可见。
