我试图使用阴影使它看起来像一个div(标题)是“上面”另一个。我的问题是“中间”div覆盖了阴影。我尝试使用z-index把头div关于中间div，但它不工作(阴影仍然被覆盖)。当我在divs之间休息，我可以看到阴影，因此我知道部分代码是正常工作。我有以下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.3);
-moz-Box-shadow: 0px 1px 10px rgba(0,0.3);
Box-shadow: 0 1px 10px rgba(0,0.3);
z-index:5;
}
#middle{
height:308px;
background-color:white;
z-index:-1;
}
有任何想法吗？谢谢。
解决方法
z-index属性仅适用于相对，绝对或固定定位的元素。
尝试给你的div #middle一个位置：relative。
