高Z索引，低Z索引

Question

我有：  具有嵌入式popup-div（#popup）的main-div（#main）  除了主要div之外，还有一个sidepane-div（#sidepane）

<div id='sidepane'>
</div>

<div id='background'>

 <div id='popup'>
 </div>

</div>

我希望它们根据z索引彼此重叠：#main z-index：1，#sidepane z-index：2，#popup z-index：3

#sidepane {
  position: absolute;
  background-color: red;
  width: 200px;
  height: 200px;
  z-index: 2;
}

#background {
  position: absolute;
  background-color: green;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#popup {
  position: absolute;
  background-color: blue;
  z-index: 3;
  left: 20px;
  top: 20px;
  width: 220px;
  height: 40px;
}

问题似乎是，我无法使具有z-index：3的#popup覆盖具有z-index：2的#sidepane，因为它本身是具有最低z-index的#main的一部分。 / p>

有没有一种方法可以解决此问题而不必触摸#main的z索引并且不必将#popup从#main中移出？

https://jsfiddle.net/0qg8jmtz/