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;应该有:before但没有z-index。

最后，:after和.pseudo-box应该与.box相关联，而不是{{1}}

在此处查看：http://jsfiddle.net/cchana/TJuDu/1/

Box-Shadow：之前，：z-index堆叠问题之后

1 个答案: