盒子阴影溢出问题答案

【问题标题】：Box-shadow overflow issue盒子阴影溢出问题
【发布时间】：2012-07-03 07:16:38
【问题描述】：

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

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

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>

有什么想法吗？谢谢！

【问题讨论】：

标签： z-index css

【解决方案1】：

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

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

编辑

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

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

【讨论】：

但我希望阴影在外面
是的，您编辑的答案就是我想要的答案。唯一的问题是我必须对页面进行大量编辑才能在每种情况下都包含一个包装器。所以我宁愿避免它。我已经更新了小提琴以包括定位和 z-index：jsfiddle.net/JR93S/32，但它不起作用。没有包装器我没有办法做到这一点吗？既然它以一种方式工作，我确定它也必须以另一种方式工作吗？
相对定位的元素将允许在其中的元素进行绝对定位。因此，必须包含该包装器。恐怕这就是 z-index 的工作原理:)

【解决方案2】：

好吧，诀窍是添加...

background-color: #FFF;

...到 div。现在 z-index 可以工作了。

【讨论】：