CSS box-shadow hidden (z-index 不修复)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5505118/
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
CSS box-shadow hidden (z-index does not fix)
提问by Tophers
I have a box-shadow on my #primaryNavdiv. Unfortunately, the shadow is being covered/hidden by the background of the following #pageelement.
我的#primaryNavdiv上有一个框阴影。不幸的是，阴影被以下#page元素的背景覆盖/隐藏。
I tried to set a z-index of 100 to #primaryNavand a z-index of -100 to #page, but that does not fix my problem.
我尝试将 z-index 设置为 100 #primaryNav，将 z-index 设置为 -100 到 #page，但这并不能解决我的问题。
Any ideas what I'm doing wrong?
任何想法我做错了什么？
回答by biggles
You need to define positioning for #primaryNav. Z-index only affects positioned elements.
I just added this in firebug and it fixed:
您需要为 定义定位#primaryNav。Z-index 只影响定位元素。我刚刚在萤火虫中添加了它并修复了它：
#primaryNav {
position: relative;
}
I would avoid using a negative z-index. Simply change z-index of #pageto 0.
我会避免使用负 z-index。只需将 z-index of 更改#page为 0。
回答by Kuepper
As jlego already said a relative position should fix it.
By the way I would suggest ensuring that there is no shadow left or right of the #primaryNav. Since #primaryNavhas a width of 100% a shadow on the side makes a horizontal scrollbar appear.
正如 jlego 已经说过的相对位置应该解决它。顺便说一句，我建议确保#primaryNav. 由于#primaryNav宽度为 100%，因此侧面的阴影会使水平滚动条出现。
For fixing this you could set a overflow:hiddento #iframe
为了解决这个你可以设置一个overflow:hidden以#iframe
回答by njebert
I took a look at your site and I think the border-bottomproperty of #primaryNavis covering up your shadow.
我看了你的网站，我认为 的border-bottom属性#primaryNav正在掩盖你的影子。
