Css3在另一个 div 下放置阴影，z-index 不工作

我试图使用一个下拉阴影，使它看起来像一个 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>

还有这个 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;
}

有什么想法吗? 谢谢。

105642

小开

最佳答案

z-index属性仅适用于定位元素，包括 position: relative、 position: absolute、 position: fixed和 position: sticky元素。

尝试给你的 div #middle一个 position: relative。

小开

在要显示的元素下尝试插入框阴影。

.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;
}

这样做可以减轻 z-index 洗牌，从长远来看你会更快乐。

小开

Building on the other answers here, I found this worked better by putting position: relative on #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.

Http://jsfiddle.net/thaddeusmt/m6bvz/

下面是简化后的代码:

<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;
}