Html 带z索引的堆叠顺序

嘿，伙计们，我在z-index上遇到了一个小的堆叠顺序问题，有几个问题，所以实际上要处理这个问题，但我无法解决这个问题，尽管我读了一些关于z-index的深入文章，比如一篇

现在我面临的问题是我有以下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，所以如果你想看到整个问题的实际效果，请参考这篇文章

现在，正如您所看到的

。灰盒

是容器，我使用了两个绝对定位的psudo元素。现在，尽管给灰盒一个z指数

z指数：999999它仍然显示在下面。
灰盒：在
之前和
之前。灰盒：在
之前的z索引为
z-index:-1

如何解决此问题，如何在
上创建
.grey box
。grey box:before

多谢各位

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

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

当伪元素的z索引为0或更大时，伪元素将重新出现

要在何处显示此项。灰色框是否从父项中删除z索引？位置：相对位置；将其堆叠在静态元素之上，而不需要z索引：）也许这就是您想要的@GCyrillus，我希望红线在
.灰框
下方。红线显示在其下方，并且根本不可见！现在你谈论阴影，你的目标听起来很清楚。你可以自己回答，解释你对z指数的理解，并收集一些要点；）