z-index - Box-shadow overflow issue

Question

I have two boxes, title and content. I am using box-shadow on these to make them more good looking. Right now, both shadows are visible one on top of the other. But i want the title shadow not to float over the content box.

If i add position: relative to the title box, the content shadow stops floating over the title (this is exactly what i want to do, but the other way around). However, trying the opposite doesn't work. Z-index also doesnt seem to be working.

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>

Any ideas? Thanks!

Answer 1

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

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

编辑

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

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

Answer 2

好的，诀窍是添加...

background-color: #FFF;

...到 div。现在 z-index 工作。