css3下另一个div下的阴影，z-index不起作用
我试图使用阴影使它看起来像一个div（标题）是“上面”另一个。 我的问题是“中间”div覆盖了阴影。 我试图使用z-index把中间div的标题div，但它不工作（阴影仍然被覆盖）。 当我在div之间rest时，我可以看到阴影，因此我知道代码的一部分工作正常。 我有以下的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; }
有任何想法吗？ 谢谢。
z-index属性仅适用于相对 ， 绝对或固定位置的元素。
试着给你的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指数的洗牌，从长远来看你会更快乐。
build立在这里的其他答案，我发现这个工作更好，把position: relative #portal_header_light而不是#middle 。 然后，我不必有z-index: -1 ，（至less在Chrome中）混乱了游标链接hover效果，并导致了一些其他奇怪的问题。
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; }
如果你的元素不是position:absolute z-index将不起作用
