Box-Shadow:之前,:z-index堆叠问题之后

Question

所以我一直在和盒子阴影一起玩,我最近做了类似这样的事情并且它工作得很完美.然后突然间它没有明显的原因停止工作!

我要做的是有一个简单的div框,下方有双阴影,可以产生一种折叠效果.

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

事情是我在另一个页面上完全喜欢这个并且它起作用,然后突然它停止在该页面上工作并且在我做的这个例子上.

Answer 1

这个问题的第二个答案实际上很好地解释了这个问题:是否可以将伪元素的堆叠顺序设置在其父元素之下？

你需要做的是.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/