盒子阴影溢出问题

Question

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

如果我将 position：relative 添加到标题框，内容阴影将停止在标题上浮动（这正是我想要做的，但反过来说）。但是，尝试相反的方法是行不通的。 Z-index似乎也没有起作用。

小提琴：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框阴影来避免重叠。

此处http://jsfiddle.net/JR93S/25/

修改

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

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

Answer 2

好的诀窍就是添加......

background-color: #FFF;

...到div。现在z-index有效。