使用jQuery将元素定位相对于非父元素

Question

如果你在这里看：http://dev.driz.co.uk/tips/，你会看到我在尝试使用一些Facebook风格的工具提示进行实验。

我想要学习的是如何将提示框相对于另一个对象定位。例如，如果用户悬停在红色框上，它将显示相关的工具提示，但是与箭头指向红色框的对象相关联。我考虑过使用outerWidth和height甚至position()方法。但是不确定该如何使用它。还需要相对地定位箭头，例如在盒子上的位置，并根据用户滚动页面即移动元素而上下移动。

如果有人可以提供一些示例，那将非常棒。

注意：目前我不打算做悬停部分，只是尝试让提示能够与其他对象定位。

有人可以帮忙吗？ 谢谢

- Cameron

---

如果你只想在鼠标悬停在红色框中时显示工具提示，你可以使用当前鼠标位置。 - Leto

我不是在尝试悬停！我是在尝试将其相对于其他对象定位。 - Cameron

请看这里: 链接 - Leto

Answer 1

var top = $("#link").offset().top;
top += $("#link").height();
var left = $("#link").offset().left;
$("#tip").css({
    top: top+"px",
    left: left + "px"
});

这段代码将#tip相对于#link进行定位。很可能你想要在#link下方显示#tip，因此使用了top += $("#link").height();。

- Rob W

---

这不是父子元素！请阅读问题标题 ;) - Cameron

经过编辑，这看起来是正确的。一般的技巧是，您将使用$("#link").offset()获取红色框相对于文档的位置，然后使用这些坐标以及绝对或固定定位作为$("#tip")坐标的基础。 - dgvid

dgvid是正确的。使用offset()而不是position()，因为第二个函数返回相对于父元素而不是根元素的偏移量。 - Rob W

请再试一次，我不小心使用了 offset("top") 而不是 offset().top。 - Rob W