Html 在彩色背景div顶部不可见的伪元素

我想渲染一个照片堆栈。我使用了一个带有before和after伪元素的div。 这个很好用。 唯一需要注意的是：这个div应该在一些单色背景上渲染。所以我把这个div放在另一个div中，这个div设置了背景色。现在，伪元素不再可见。出什么事了

这是HTML：

<div id="main">
 <div class="gallery-stackone"></div>
</div>

以下是相应的

检查 我已经改变了CSS如下

#main {
    background-color: green;
    border: 1px solid blue;
    width: 100%;
    height: 300px;
    position:relative;
    z-index: -2;    
}

---

我给-2加了一个

z-index

值，因为你给

加了
z-index:-1
。gallery stackone:在

之后，为了z-index起作用，我还给div加了一个

位置：相对

。

你是我的英雄！谢谢！！：-）

#main {
    background-color: green;
    border: 1px solid blue;
    width: 100%;
    height: 300px;
    position:relative;
    z-index: -2;    
}