将伪元素置于父元素后面

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

删除##dev的z-index并为box添加position:absolute

box:after

jsfiddle

Answer 2

  

蓝框应该在绿框后面

只需删除所有irrelvant z-index值，然后它就能完美运行。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;