html – Box-Shadow：之前,：z-index堆叠问题之后

概述所以我一直在和盒子阴影一起玩,我最近做了类似这样的事情并且工作得很完美.然后突然间它没有明显的原因停止工作！ 我要做的是有一个简单的div框,下方有双阴影,可以产生一种折叠效果. 如果你在jfiddle http://jsfiddle.net/TJuDu/上查看它,你可以看到我所做的所有代码.问题是堆叠：before和：after元素,它的位置正确但堆叠错误,阴影位于.layout div后面,当 所以我一直在和盒子阴影一起玩,我最近做了类似这样的事情并且工作得很完美.然后突然间它没有明显的原因停止工作！

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

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

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

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

你需要做的是使用.Box作为包装器,如下所示：

<div >    <div >        <h3>Awesome Box Title!</h3>        <p >This is a Box!</p>    </div></div>

然后对于CSS,将以下内容应用于.Box：

position:relative;z-index: 2;

(或者与z-index相关的任何内容),其余的样式应该应用于.pseudo-Box,它应该具有position：relative;但没有z指数.

最后,：before和：after应与.pseudo-Box相关联,而不是.Box

看到它在这里工作：http://jsfiddle.net/cchana/TJuDu/1/

总结

以上是内存溢出为你收集整理的html – Box-Shadow：之前,：z-index堆叠问题之后全部内容，希望文章能够帮你解决html – Box-Shadow：之前,：z-index堆叠问题之后所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。