將偽元素放置在父元素后面

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並在box:after添加position:absolute

.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

藍色框應該在綠色框后面

---

只需刪除所有無關緊要的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>