检测重排或移动HTML元素？

Question

我构建了一个UI小部件，在实际小部件下面显示一个浮动弹出窗口。它使用绝对定位将自己定位在小部件下方。我担心的是，当文档布局稍微改变时，绝对定位的元素不在我的UI小部件下面。

有没有办法检测HTML元素是否已移动或重排？

Answer 1

如何使用相对定位并将小部件附加到实际的小部件？这样它将始终保持相对于原始小部件的相同位置。

Answer 2

您可以将元素附加到body标签，并根据鼠标的位置将其放置在页面上。这就是jQuery UI Dialog和工具提示类型脚本等如何解决z-index问题。

如果你有jQuery，那么

是这样的：

$('#clickelement').click(function(e){
     $('#yourlayer').appendTo('body').css({left: e.pageX + 'px',top: (e.pageY + 12) + 'px',zIndex:'10001'}).show();
});

#yourlayer{
    display:none;
    position:absolute;
    width:300px;
}

编辑：修正小错误

Answer 3

我找到了一个可以接受的解决方案。

每当显示浮动弹出窗口时，我创建一个每250毫秒运行一次的间隔，再次计算其位置（如果父级的位置已经改变）。当弹出窗口隐藏或关闭时，我结束计时器。