【发布时间】：2012-12-10 20:43:05
【问题描述】：
我有一个带有这个给定类的 DIV 元素：
.slideshow { background: white; width: 700px; height: 300px; padding:10px; margin: 0 auto; position: relative; box-shadow: 0px 0px 5px grey, 0px 10px 20px rgba(0,0,0,.1) inset; }
我定义了这两个伪元素（:before 和 :after）：
.slideshow:before, .slideshow:after { content: " "; background: green; width: 50%; height: 50%; position: absolute; z-index: -10; }
我的问题是这两个伪元素出现在我的 DIV 前面而不是后面。这种行为有什么具体原因吗？
这里是一个例子：EXAMPLE
Javascript 部分有点乱，但我仍在努力。
我还注意到，如果我删除所有 JS 部分，我就不会再遇到这个问题了，但我认为代码中没有任何内容应该修改 slideshow DIV .
【问题讨论】：
-
jsfiddle.net/Mf4M5 我摆弄了它。请修改它并将您的问题更新为适当的标记，以帮助解释问题所在。
-
好吧，我已经修改了你创建的小提琴，它工作正常。我的问题是，在我正在做的网站上，两个伪元素出现在 div 元素的前面而不是后面。就像 z-index 属性设置为 1。
-
很高兴听到您解决了这个问题！您会这么好心并发布您的解决方案作为答案吗？如果您回答自己的问题，以后的访问者会更容易看到。
-
请不要将标题标记为“已解决”。只需在下面发布您的解决方案作为答案，然后“接受”它。
-
我无法回答我自己的问题，由于我的声誉，我必须等待 6 小时...我还是新手。我会尽快做的！
标签： html css pseudo-element