Why does the pseudo element overlays parent?

Issue

Im trying to move the pseudo ::after element below the parent div. But it doesnt work too well. How to move the green box under blue?

.parent {
  height: 100px;
  width: 100px;
  background: blue;
  position: relative;
  z-index: 10;
}

.parent::after {
  position: absolute;
  top: -10px;
  background: green;
  content: '';
  height: 40px;
  width: 40px;
  z-index: 2;
}

<div class="parent" />

Solution

Cause you have position: relative on .parent. You can add a .container and move position: relative to it.

.container {
  height: 100px;
  width: 100px;
  position: relative;
}

.parent {
  width: 100%;
  height: 100%;
  background: blue;
}

.parent::after {
  position: absolute;
  top: -10px;
  background: green;
  content: '';
  height: 40px;
  width: 40px;
  z-index: -1;
}

<div class="container">
  <div class="parent" />
</div>

Answered By - Shuo