处理儿童和同级绝对位置中的兄弟姐妹的z-index

Question

Green跨度文本应在蓝色框中。

我不知道为什么它不起作用，即使z-index的{​​{1}}跨度也高于蓝框​​。

Green

.green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  height: 100px;
  text-align: center;
}

.green {
  top: 60px;
  left: 60px;
  background: green;
  z-index: 1;
}
.green span {
  z-index: 3;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
  z-index: 2;
}

预期结果如下；

如何使绿色范围位于蓝色框上方？