jQuery：将元素定位在另一个元素旁边并固定在那里

Question

我想把ElementA放在ElementB旁边，就像这里指定的一样：如何使用jQuery将一个元素相对于另一个元素定位？

唯一的区别是，如果ElementB被移动，我希望ElementA也随之移动。

有没有可能将某个元素的位置固定在另一个元素上？每次移动ElementB时重新计算ElementA的位置不可行。

更新

在我的情况下，ElementB是一个td元素。显然，td元素不能相对定位，这就是为什么ElementA没有随着ElementB移动的原因。解决方案很简单，只需在ElementB内添加一个相对定位的div，然后将ElementA放在其中即可。

- ajbeaven

Answer 1

编辑：这里有一个实时示例：http://jsfiddle.net/jPUbh/

将您的HTML更改为以下内容：

<div id="placeholder" style="position:relative">
    <div id="placeholder-text">Hover over me to show the menu here</div>
    <div style="position: absolute; display: none; top: 20px; left: 0px" id="menu">
       <!-- menu stuff in here -->
    </div>
</div>

将您的JS添加到此处：

$("#placeholder-text").mouseover(showMenu);

var showMenu = function(ev) {
  $("#menu").show();
}

当父元素（在本例中为div#placeholder）被设置为相对定位时，内部被设置为绝对定位的块级元素将相对于父元素进行定位。因此，请更改div#menu的top和left属性以适应您的需要。现在，如果div#placeholder移动，则div#menu也会随之移动。

通过一些CSS，您的JS代码也会更加简洁！

此外，这些ID是完全通用的，您可以根据需要更改它们 :-) 如果在HTML中更改了它们，请更新JS！

- moe

---

嗯，它不起作用。在我的情况下，通过JavaScript将ElementA附加到ElementB。这会对ElementA的定位产生任何影响吗？ - ajbeaven

哦，ElementB也是一个<td>。 - ajbeaven

哇！谢谢！我已经为此点赞了！我已经将“position:”设置为我能想到的所有内容，但从未想过将父对象设置为“relative”...这就解决了问题！非常感谢你！ :D - Nicolai Dutka

Answer 2

如果您将ElementA作为ElementB的子元素，则是可能的，它不必“在内部”才能成为子元素，您可以使用负坐标将该元素相对于父元素定位到外面。然后移动ElementB时也会重新定位子元素。

演示：http://jsfiddle.net/sEGZD/

- Orbling

---

@bnieland：添加了一个演示，所有的DIV都可以移动，父元素控制整体移动。 - Orbling