将伪元素放置在父元素后面

Question

I am attempting to place an image (after) behind a parent image. I've used boxes as example of what I am trying to achieve - the blue box is supposed to be behind the green box but no matter what z-index I use it doesn't seem to work.

 .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

Remove the z-index of the box and add position:absolute for 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

The blue box is supposed to be behind the green box

---

Just remove all the irrelvant z-index values, then it works perfectly.

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