Html css3 在另一个 div 下投影，z-index 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3258943/
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
css3 drop shadow under another div, z-index not working
提问by vee
i'm trying to use a drop shadow to make it look like one div (the header) is "above" another. my problem is that the "middle" div is covering the drop shadow. i tried using z-index to put the header div about the middle div, but it's not working (the shadow is still being covered). when i put a break between the divs, i can see the shadow and therefore i know that part of the code is working properly. i have the following html code:
我正在尝试使用投影使其看起来像一个 div（标题）在另一个“上方”。我的问题是“中间”div 覆盖了阴影。我尝试使用 z-index 将标题 div 放在中间 div 上，但它不起作用（阴影仍在被覆盖）。当我在 div 之间放置一个中断时，我可以看到阴影，因此我知道部分代码工作正常。我有以下 html 代码：
<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>
and this css:
和这个CSS：
#portal_header_light {
font-family:Arial, Helvetica, sans-serif;
font-size:12px; text-align:center;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
padding: 0px 3px 0px 3px;
background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
z-index:5;
}
#middle{
height:308px;
background-color:white;
z-index:-1;
}
any ideas? thanks.
有任何想法吗？谢谢。
回答by gearsdigital
The z-indexproperty works only on positionedelements. Those include position: relative, position: absolute, position: fixed, and position: stickyelements.
该z-index属性仅适用于定位元素。这些包括position: relative，position: absolute，position: fixed，和position: sticky元件。
Try to give your div #middlea position: relative.
尝试给你的 div#middle一个position: relative.
回答by wittmason
Try an inset box shadow ON the element you want to appear under.
尝试在要显示在其下的元素上使用插入框阴影。
.element-that-is-to-be-under{
-webkit-box-shadow: inset 0 8px 4px -4px #ddd;
-moz-box-shadow: inset 0 8px 4px -4px #ddd;
box-shadow: inset 0 8px 4px -4px #ddd;
}
Doing this will alleviate the z-index shuffle and you'll be much happier in the long run.
这样做会减轻 z-index shuffle，从长远来看你会更快乐。
回答by thaddeusmt
Building on the other answers here, I found this worked better by putting position: relativeon #portal_header_light, instead of #middle. Then I didn't have to have z-index: -1, which (at least in Chrome) messed up the cursor link hover effects and caused some other odd issues.
基于此处的其他答案，我发现通过position: relative使用#portal_header_light, 而不是#middle. 然后我不必有z-index: -1，这（至少在 Chrome 中）弄乱了光标链接悬停效果并导致了其他一些奇怪的问题。
http://jsfiddle.net/thaddeusmt/m6bvZ/
http://jsfiddle.net/thaddeusmt/m6bvZ/
Here is the simplified code:
这是简化的代码：
<div id="portal_header_light">Header Content</div>
<div id="middle">Test Content</div>
#portal_header_light {
position: relative;
padding: 3px;
background: #eee;
-webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3);
z-index:5;
}
#middle{
height:308px;
background-color:#fee;
padding: 3px;
}
