z-index对祖父母-父母-子女的行为

Question

为什么下面的代码使.child在.grand和.parent之间移动？ 我花了将近2个小时来了解这种Z-index行为，但到目前为止还没有运气 有人可以向我解释此代码的结果吗？

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,body{height: 100%;}
.grand {
  width: 100vw ;
  height: 100vh;
  background-color: black ;
  position: relative;
  z-index: 1 ;
}
.parent {
  width: 450px ;
  height: 450px;
  position: absolute ;
  left: 20px;
  background-color: crimson ; 
}
.child {
  width: 150px ;
  height: 150px;
  position: absolute ;
  left: -20px;
  background-color: cadetblue ; 
  z-index: -1 ;
}

 <div class="grand">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>