stacking order with z-index

Question

hey guys i am having a small stacking order problem with z-index , a few question on SO actually deal with this issue but i am unable to resolve this issue inspite of reading a few indepth articles on Z-index , Like this one.

now the issue i am facing is i have the following 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;
} 

my issue is with the css not with html , so if you wanna see the whole problem in action please refer to this fiddle.

now as you can see .grey-box is the container and i am using two psudo elements which are absolutely positioned . now inspite of giving .grey-box a z-index of z-index: 9999999; it still appears below . grey-box:before and .grey-box:before has a z-index of z-index: -1; .

how do i solve this issue , how do i make .grey-box on top of .grey-box:before ??

thank you.

Alex-z

Answer 1

your issue is solved setting z-index to auto on the container

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

the pseudo element will reappear when its z-index is 0 or greater

fiddle