带有z-index的堆叠顺序

Question

嘿家伙我有z-index的，对所以实际上这个问题解决了几个问题，一个小的堆叠顺序的问题，但我无法来解决这个问题inspite的阅读Z-指数的几个深入的文章，像这一个。

现在我面临的问题是我有以下CSS：

.grey-box {
    position: relative;
    padding: 50px 0;
    background: #eee;
    z-index: 9999999;
}

.grey-box:after {
    content: '';
    position: absolute;
    top: 100%;
    height: 30px;
    width: 30px;
    background: #eee;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    -webkit-transform: rotateZ(45deg); /* Safari */
        transform: rotateZ(45deg);
    z-index: 2;    
} 

.grey-box:before {
    content: '';
    position: absolute;
    top: 90%;
    height: 2px;
    width: 100%;
    background: red;
    /*left: 50%;
    margin-left: -15px;
    margin-top: -15px;*/
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,1);
    box-shadow: 2px 2px 5px rgba(0,0,0,1);
    z-index: -1;
} 

我的问题是css而不是html，所以如果您想了解整个问题，请参阅此小提琴。

现在，如您所见， .grey-box是容器，我正在使用两个绝对定位的psudo元素。 现在尽管给.grey-box一个z-index的z-index: 9999999; 它仍然显示在下方。 grey-box:before和.grey-box:before的z-index为z-index: -1; 。

我该如何解决此问题，如何在.grey-box:before制作.grey-box ？

谢谢。

亚历克斯-Z

Answer 1

您的问题已解决，将容器上的z-index设置为auto

.grey-box {
    position: relative;
    padding: 50px 0;
    background: #eee;
    z-index: auto;
}

当伪元素的z-index为0或更大时，它将重新出现

小提琴