javascript - 让一个元素完全覆盖另一个

Question

我正在尝试拥有一些元素，我们称之为 overlayElement，完全覆盖另一个元素，我们称之为 originalElement。 Overlay 元素是一个 iFrame，尽管在这种情况下这可能无关紧要。我需要让 overlayElement 完全覆盖 originalElement，这意味着它们的大小完全相同，并且在用户会看到 originalElement 的任何地方，他们现在看到了 overlayElement。它还需要与 originalElement 精确滚动，以便它自然地融入页面。

到目前为止我找到的一个选项是运行一个计时器，每隔几秒查找 originalElement 的位置和大小，并将 overlayElement 的 positiong 设置为绝对，并将其与 originalElement 返回的那些定位指南相匹配.

这有一个问题，我的代码运行得比它需要的要频繁得多，因为大多数时候它们的 originalElement 的定位没有变化。它还可能导致 block 状更新。

我更愿意通过 HTML5、javascript 或 CSS 找到一种方法，允许 overlayElement 自动覆盖 originalElement，并随着 originalElement 在页面上四处移动而跟随它。如果这不可能，是否有一些事件会在页面上元素的位置发生变化时触发？

感谢您的任何建议。

Answer 1

没有办法“自动”完成。您需要读取元素的位置和尺寸并将这些属性传输到您的 iframe。

如果不 Hook 更改布局的代码，您已经在做的就是您能做的最好的。