CSS过滤器禁用固定位置

我有一个页面可以正常工作,直到过滤器被激活。有一个 footer 在 body 设置为的元素 fixed 在视口的底部。现在我需要创建另一个 页脚 form ,并且为了使提交按钮工作,它们必须在 类型 要素

当页面上打开模式时( here's the code that does that ),背景变暗并过滤。但一旦该过滤器生效,第二个 页脚 不再位于视口的底部,而是位于其他页面内容的底部,这些内容可以位于任何位置。

这是显示问题的示例。只需注释掉过滤器样式,看看它应该是什么样子。不同的颜色和高度仅用于图示目的。在我的应用程序中,所有的页脚看起来都一样。事实上,我不再使用footer2,但需要将footer1放在footer2所在的位置, 总是 .

body>* {
  filter: blur(1px);
}

main {
  border: 2px solid #64e315;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
}

#footer1 {
  background: #dce2f8;
}

#footer2 {
  border: 2px solid #e38e15;
  text-align: center;
}

<main>
  <p>
    Main content
  </p>
  <p style="height: 150px;">
    <!-- Placeholder for fixed footer 1 -->
  </p>

  <footer id="footer1">
    Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
  </footer>
</main>

<footer id="footer2">
  Footer 2
</footer>

From what I've read now 我觉得CSS规范需要这样做。我就是不明白为什么。为什么过滤器会影响任何布局?有什么方法可以防止这种情况发生吗?请记住,按钮必须在表单中,否则无法使用。