html - box-shadow 隐藏，不在上面

Question

我尝试在 div 上放置一个 box-shadow 并将其放在下面的 div 上方，但阴影是隐藏的：http: //jsfiddle.net/fraiddo/9TMdc/

<div style="z-index: 2000; width: 300px; height: 130px; background-color: #eeeeaa; -webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.5);  -moz-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px  50px rgba(0, 0, 0, 0.5);">test 1</div>


<div style="z-index: 1000; width: 300px; height: 130px; background-color: #dadada;">test 2</div>

Answer 1

您已将 z-index 设置为两个元素，但这还不足以使其正常工作。

获得它的一种方法是将第二个 div 更改为相对位置，并将 z-index 更改为负数：

z-index: -1; 
position: relative;

演示

Answer 2

您的意思是 box-shadow 没有在顶部 div 下方正确显示吗？您可能需要调整 box-shadow 属性的值以达到您想要的效果。

这更像是你想要做的吗？http://jsfiddle.net/K2yty/

    <div style="z-index: 2000; width: 300px; height: 130px; background-color: #eeeeaa; -webkit-box-shadow: 3px 4px 50px rgba(0, 0, 0, 0.5);  -moz-box-shadow: 3px 4px 50px rgba(0, 0, 0, 0.5); box-shadow: 3px 4px  10px rgba(0, 0, 0, 0.5);">test 1</div>

另外，不要忘记更改每个浏览器特定值的值：moz、webkit 等。