Z索引，位置：固定和变换：缩放效果不佳

Question

请注意，这基本上是另外两个问题结合在一起（两者之间的相互作用是导致两个解决方案都不适合我的原因）：'transform3d' not working with position: fixed children和z-index not working with fixed positioning

我已经创建了一个页面，其中有一个菜单深深地嵌套在该页面上，当激活时，我想要一个覆盖层来阻止与页面其余部分的交互。更复杂的是，菜单所在的编辑器具有“缩放”功能（使用transform：scale）。

问题是，如果我将overlay元素放置在与菜单相同的级别，则可以正确使用z-index，但是位置：fixed损坏了，因此overlay无法覆盖整个页面。但是，如果我将overlay元素移到更高的位置（例如在html主体下），则z-index不可用，因为这些元素处于不同的堆叠上下文中，因此，overlay覆盖了菜单按钮。

我尝试过的另一件事是使用围绕转换的“ zoom” css属性，但是浏览器对此的支持充其量是零散的，而Firefox完全不支持。

非常感谢您的帮助！

我已在此Codepen中创建了我的情况的简化版本，其中的js中有两行可以切换以显示我尝试过的两个定位选项：https://codepen.io/slope-taylor/pen/ewJgaM

示例CSS：

.editor {
  background-color: #aaa;
  float: left;
  transform: scale(.9); // zoomed, needs to exist
}

.menu-container {
  text-align: center;
}

.menu-container > button {
  position: relative;
  z-index: 5;
}

.menu-overlay {
  position: fixed;
  background-color: rgba(0,0,0,.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}