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

如果你想要背景，这是一个跟进问题How can I stop an IFrame reloading when I change it's position in the DOM?。如何将绝对定位的元素直接放在内联元素的位置上？

我有一个内联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将移动，但加载器不会。

是否有这样做的安全方式 - 当我对页面没有其他任何知识时它需要工作（即，我不能仅仅对其他任何可能导致回流的方法进行调用，因为我没有知道这些是什么）。

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

来源

2010-02-09 James Crowley

我开始后悔my answer现在。希望你能找到比绝对定位解决方案更好的东西。但是，本着kludgey解决方案的精神，您可以在定时器上调用重定位脚本。感叹。

来源

2010-02-10 00:41:47 Jacob

如果我正确理解你的问题，没有必要为Javascript。只需在leaderboard-slot标记前面放置leaderboard-loader，给它position: absolute并且宽度和高度相同。如果插槽是一个正常的元素，加载器将浮在它上面并完美地覆盖它。

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

来源

2010-02-09 23:39:57

感谢佩卡。不幸的是，排行榜加载器必须出现在文档的底部（它加载了一堆使用document.write的外部脚本） - 这个想法是在排行榜加载器之前允许整个页面加载。 – 2010-02-09 23:51:00

啊，我明白了。我重读了“进一步下一页”。 – 2010-02-09 23:53:22

你可以把他们都在相同的相对定位，0边距div，与临时股利Z索引在慢加载器的顶部。

使它们都绝对定位在父窗口中，而不是窗口中，它们的大小是0：0。

您可以使用不透明和褪色一个作为你消失的另一个出来，或者只是交换visibility：hidden的和这两个元素可见，当你准备..

来源

2010-02-10 00:58:38 kennebec

看到我对Pekka的评论 - 不幸的是，它们不能在同一个div中 - 需要页面才能够在没有“loader”div的情况下首先加载。还是）感谢你的建议：） – 2010-02-10 01:07:13

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

回答

相关问题