帶有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或更大時，它將重新出現

小提琴