伪元素上的Z-index呈现顺序错误

Question

我正在尝试使用css psudo元素制作“老式”块阴影。

当父级为position: relative时效果很好，但是在父级绝对定位的情况下，渲染变得很奇怪。

.a-shadow {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 300px;
  height: 200px;
  margin: 50px;
  background: #7f828b;
  z-index: 1000;
  color: green;
  font-size: 22px;
}
.a-shadow:before {
  display: inline-block;
  content: '';
  position: absolute;
  z-index: -1;
  left: 11px;
  top: 11px;
  width: 100%;
  height: 100%;
  background: black;
}

.e-otherText {
  width: 400px;
}

<div>
  <div class="e-test a-shadow">Why is this text here? on top of the background?</div>
  <div class="e-otherText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet egestas velit, quis vulputate mauris elementum eu. Quisque vestibulum justo ante, quis congue dui tincidunt vitae. Suspendisse potenti. Vivamus dui ex, euismod quis condimentum
    vitae, condimentum ut metus. Suspendisse lobortis mi non lacinia consectetur. Aliquam tempor nec purus et blandit. Quisque malesuada justo id erat sodales, dignissim pellentesque lorem eleifend. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Curabitur non porta nibh. </div>
</div>

如果您查看此代码段，则可以看到阴影.a-shadow:before被放置在父级的顶部。但是，父级中的文本放置在阴影上方。

如果文字在阴影下面，我会理解的，但这没有任何意义。