由于绝对定位的抽屉，移动键盘会推高内容

Question

新手上路，请多包涵

我正在制作一个包含 3 个抽屉的网站 - 绝对位于屏幕外的元素，一个在左侧，一个在右侧，一个在底部。

看看这里的网站，看看我在说什么 https://sjbuysse.github.io/javascriting/index.html

单击底部的 Pop up! 开关，您将看到一个 div 和一些 inputs 出现。像往常一样，当您在移动浏览器中单击其中一个 inputs 时，会显示一个键盘，结果将调整网站大小。当屏幕上（键盘上方）的输入足够高时，这在我的网站上没有问题。但是，如果我没有向下滚动那么多，并且键盘弹出到所选的 input 元素上方，我的整个网站就会被向上推，并且在我的 <html> 下创建了一些空白区域 --- 内容。即使在我关闭键盘后，那个空白区域仍然存在。

我会用截图告诉你我的意思：

情况一：当输入足够高到键盘上方时，没问题。

情况二：当屏幕输入不够高，键盘会弹出，网站内容被推高

即使隐藏键盘后，空白区域仍保留在网站中

经过大量调试后，我找出了这个问题的原因：我网站上的右侧抽屉（您可以使用 + 符号打开的抽屉）以某种方式通过绝对定位导致了这个问题.这个抽屉的 css 看起来像这样：

 .create-drawer {
  height: 100vh;
  text-align: left;
  color: #EEE;
  width: 200px;
  background-color: #1C262F;
  position: absolute;
  top: 0;
  transition: transform 0.3s ease-out;
  z-index: 2;
  box-sizing: border-box;
  right: 0;
  transform: translate(200px, 0);
}

只需注释掉 position: absolute 行，问题就解决了。谁可以给我解释一下这个？

此外，左侧抽屉（带有过滤器符号）具有完全相同的 css（除了它位于左侧），并且不会干扰任何东西。我也很想了解这是怎么可能的。