相同的z-index不会产生想要的盒子阴影效果

Question

box shadow codepen

#b {
  background: orange;
  box-shadow: 0 0 10px black;
  z-index: 2;
  position: relative;
}

#c {
  background: red;
  box-shadow: 0 0 10px black;
  z-index: 2;
  position: relative;
}

我正在尝试获取具有相同z级别的元素，以便在其框阴影中不会相互重叠。在链接示例中，所有内容的z级别均为2，但中间元素的框阴影与上部元素重叠。我原以为只要两个元素在同一个平面上，就不会发生这种情况。有什么建议吗？