z-index - 盒子阴影溢出问题

Question

我有两个框，标题和内容。我在这些上使用 box-shadow 使它们看起来更漂亮。现在，两个阴影都可见，一个在另一个之上。但我希望标题阴影不要漂浮在内容框上。

如果我将 position: relative 添加到标题框，内容阴影将停止 float 在标题上(这正是我想要做的，但相反)。但是，尝试相反的方法是行不通的。 Z-index 似乎也不起作用。

fiddle :http://jsfiddle.net/JR93S/24/

h2 {
    width: 300px;
    margin: 20px 0px 0px 20px;
    padding: 5px 11px 5px 11px;

    border-radius: 3px;

    color: #333;
    background-color: #CCF;

    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}

div {
    width: 300px;
    height: 300px;
    margin: 0px 0px 0px 20px;
    padding: 10px 10px 10px 10px;

    border: 1px solid #999;

    border-radius: 3px;

    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}

<h2>title</h2>
<div>some stuff here</div>

有什么想法吗？谢谢!

Answer 1

您可以只使用 inset box-shadows 来避免重叠。

在这里，http://jsfiddle.net/JR93S/25/

编辑

我想这就是你想要的效果。

http://jsfiddle.net/JR93S/31/