z-index堆叠具有两个重叠区域的上下文

Question

这是我的代码

HTML

<div class="left">
   <div class="rectangle"></div>
</div>
<div class="right">
</div>

CSS

.left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 30%;
  border: 1px solid blue;
  z-index: 10;
}

.right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  right: 0;
  border: 1px solid red;
  z-index: 20;
  background-color: lightgray;
}

.rectangle {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: black;
  right: 0;
  top: 50%;
  z-index: 100;
}

左侧区域的z-index小于右侧区域的z-index，但矩形的z-index大于两个区域，但它不可见。

问题：是否可以在不改变两个区域的z-index属性的情况下使矩形可见？

JSFiddle here