4

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

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

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

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

4

1 回答 1

7

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

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

于 2012-06-22T08:31:42.587 回答