位於父級後面的僞元素

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>