位于父级后面的伪元素

Question

我正试图将图像（之后）放在父级图像之后。我用盒子作为我想要实现的例子 - 蓝框应该在绿框后面，但不管我用什么z-index似乎都不起作用。

.box-wrapper { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 
.box { 
 
    background-color: green; 
 
    position: relative; 
 
    display: block; 
 
    height: 52px; 
 
    width: 72px; 
 
    z-index: 53; 
 
    top: 2%; 
 
    z-index: 2; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    //position: relative; 
 
    background-color: blue; 
 
    display: block; 
 
    height: 50px; 
 
    width: 70px; 
 
    z-index: -3; 
 
}

<div class="box-wrapper"> 
 
    <div class="box"></div> 
 
</div>

Answer 1

取下box的z-index和添加position:absolute为box:after

.box-wrapper { 
    position: absolute; 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    z-index: 1; 
} 
.box { 
    background-color: green; 
    position: relative; 
    display: block; 
    height: 52px; 
    width: 72px; 
    top: 2%; 
} 
.box:before { 
    content: ''; 
    position: absolute; 
    background-color: blue; 
    height: 50px; 
    width: 70px; 
    z-index:-2; 
} 

jsfiddle

Answer 2

蓝盒子应该是后面的绿框

---

只是删除所有irrelvant z-index值，那么它完美的作品。

.box-wrapper { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 
.box { 
 
    background-color: green; 
 
    position: relative; 
 
    display: block; 
 
    height: 52px; 
 
    width: 72px; 
 
    top: 2%; 
 
    color:white; 
 

 
} 
 
.box:after { 
 
    content: ''; 
 
    position: relative; 
 
    background-color: blue; 
 
    display: block; 
 
    height: 50px; 
 
    width: 70px; 
 
    z-index: -1; 
 
}

<div class="box-wrapper"> 
 
    <div class="box">I'm on top</div> 
 
</div>