z-index pseude元素超过父母，但在其余部分

Question

z-index pseude元素超过父母，但在其余部分 所以如果我有两个div，第一个（橙色）应该超过第二个（绿色）。 然后我添加一个pseude元素应该在第一个（橙色），但在第二个（绿色。

下面）。

https://jsfiddle.net/gnorg/1Lypbs3u/

＆＃13;

＆＃13;

.box {
    width: 28px;
    height: 34px;
    background-color: #ff6d00;
    position: relative;
    top: 25px;
    z-index: 6;
}

.box:before {
    content: "";
    position: absolute;
    height: 25px;
    width: 25px;
    left: 20px;
    background-color: #2d2d2c;  
    z-index: 4;
}

.box-under {
  height: 25px;
  width: 25px;
  left: 25px;
  position: absolute;
  background-color: green;
  z-index: 5;
}

＆＃13;

<div class="box"></div> <!--orange-->

<div class="box-under"></div> <!--green-->

＆＃13;

＆＃13;

＆＃13;

这怎么可能？

所以黑色越过橙色并落后于绿色（不要考虑大小等）