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

Question

我尝试在 div 上放置一个框阴影并使其位于下面的 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;

demo