css3在另一个div下投影,z-index无法正常工作

Question

我正在尝试使用投影使其看起来像一个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;
}

有任何想法吗？谢谢.

Answer 1

该z-index属性仅适用于相对,绝对或固定定位元素.

试着给你的div position: relative一个position: absolute.

Answer 2

在要显示的元素上尝试插入框阴影.

.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 shuffle,从长远来看,你会更快乐.

Answer 3

在此基础上其他的答案,我发现这个工作更好地把position: relative上#portal_header_light,而不是#middle.然后我没有必要z-index: -1,(至少在Chrome中)搞砸了光标链接悬停效果并引起了一些其他奇怪的问题.

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