为什么我的`position：fixed`元素相对于它所在的网格区域？

Question

我正在创建这个应用程序，我想在另一个元素中创建一个元素，当显示时会占用整个页面，类似

.fullpage {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

在我的应用程序的其余部分中，我大量使用Dislpay：flex和Display：grid，显然这与我期望.fullpage的工作方式相混淆，但我不太明白。

我知道尝试创建一个最小的可验证示例是堆栈溢出策略，所以我花了大约30分钟尝试用更少的细节重新创建这里发生的事情，而我不能。但是当我在jsfiddle中发布我在这里并在Chrome，FF或IE中打开它时，它会产生相同的错误 - 位置：固定元素被定位到网格元素的顶部，而不是页面的顶部，我不明白为什么。

https://jsfiddle.net/9cgftwuu/4/

如果右键单击底部并进行检查，您将找到一个带class="pick-overlay fullpage"的元素。这是表现奇怪的元素。