Box-Shadow :before, :after z-index 堆叠问题

Question

所以我一直在玩两者的盒子阴影，我最近做了一些类似的事情并且效果很好。然后突然间它无缘无故停止工作！

我想做的是有一个简单的 div 框，下面有双阴影来产生折叠效果。

如果您在 jfiddle http://jsfiddle.net/TJuDu/ 查看它，您可以看到我完成的所有代码。问题是 :before 和 :after 元素的堆叠，它的位置正确但堆叠错误，阴影在 .layout div 后面，而它们应该清楚地显示在 .box div 后面。如果我删除 z-index 值，我可以看到位于 .box div 上方的阴影。

事情是我在另一个页面上做了完全一样的事情并且它工作了，然后突然它停止在那个页面上工作并且在我制作的这个例子中。

Answer 1

这个问题的第二个答案其实很好的解释了这个问题：Is it possible to set the stacking order of pseudo-elements below their parent element?

您需要做的是像这样使用.box 作为包装器：

<div class="box">
    <div class="pseudo-box">
        <h3>Awesome Box Title!</h3>
        <p class="box-text">This is a box!</p>
    </div>
</div>

然后对于 CSS，将以下内容应用于 .box：

position:relative;
z-index: 2;

（或与 z-index 相关的任何内容），其余样式应应用于 .pseudo-box，它应该有 position: relative; 但没有 z-index。

最后，:before 和 :after 应该与 .pseudo-box 关联，而不是 .box

在这里查看它的工作原理：http://jsfiddle.net/cchana/TJuDu/1/