如何将绝对定位的元素直接放在内联代码的位置上？

Question

这是我更改DOM中的位置时如何停止IFrame重新加载的后续问题？ 如果您想要背景。

我在页面的下面有一个内联div <div id="leaderboard-slot"></div> （具有固定的宽度和高度），还有一个div（“ leaderboard-loader”），位于该页面的后面，具有该div的实际内容。

由于各种原因（请参阅上一个线程），我无法简单地执行appendChild或类似操作。

取而代之的是，我希望将排行榜装载机的位置确定为使其占据排行榜插槽“预留”的空间。 我使用了一些jQuery方法来做到这一点：

var loader = $('leaderboard-loader');
var dest = $('leaderboard-slot');
var pos = dest.getPosition();
loader.setStyle('top', pos.y + 'px');
loader.setStyle('left', pos.x + 'px');

我会在文档加载和调整大小时触发。 但是，如果页面中的其他元素导致重排，则目标div会移动，但加载器不会。

有没有一种安全的方法-当我对页面一无所知时，它需要工作（即，我不能仅对可能导致重排的任何其他方法进行此调用，因为我不知道这些是什么） ）。

任何帮助将不胜感激-谢谢:)

Answer 1

如果我正确理解了您的问题，则无需使用Javascript。 只需将leaderboard-loader放在leaderboard-loader leaderboard-slot标签的前面，并为其position: absolute且宽度和高度相同。 如果插槽是普通元件，则装载程序将漂浮在其上方并完全覆盖它。

<div id="leaderboard-loader"></div><div id="leaderboard-slot"></div>

Answer 2

我现在开始后悔我的回答 。 希望您能找到比绝对定位变通方法更好的方法。 但是，本着节约解决方案的精神，您可以在计时器上调用重新定位脚本。 感叹 。

Answer 3

你可以把两者的相对位置相同，0保证金DIV，用DIV临时Z-索引的慢装载机的顶部。

使它们都绝对位于父级（而不是窗口）中，且大小为0：0。

您可以使用不透明度并淡入淡入，而另一种淡入淡出，或者只是交换可见性：准备就绪时，这两个元素是隐藏的和可见的。