如何相对于外部绝对div降低内部绝对div的z-index？

Question

我想要的是什么：

我得到的是什么：

相应代码：https://jsfiddle.net/JerryGoyal/2zy2wj78/4/

＆＃13;

＆＃13;

.circle {
  display: inline-block;
  border: solid 20px blue;
  border-radius: 51%;
  position: absolute;
  z-index: 5;
}

.line {
  margin: 0 0 0 -2px;
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 100px;
  background: red;
  z-index: -1;
}

＆＃13;

<div class='circle'>
  <div class='line'></div>
</div>

＆＃13;

＆＃13;

＆＃13;