javascript - jQuery:将元素放在另一个旁边并将其固定在那里

Question

我想将 ElementA 放在 ElementB 旁边，如下所示: How to position one element relative to another with jQuery?

唯一的区别是，如果 ElementB 被移动，我希望 ElementA 与 ElementB 一起移动。

是否有可能以某种方式将某个元素的位置固定到另一个元素？每次移动 ElementB 时都重新计算 ElementA 的位置对我来说是不可行的。

更新

在我的情况下，ElementB 是一个 td 元素。显然，td 元素不能相对定位，这就是 ElementA 不随 ElementB 移动的原因。一个简单的解决方法是在 ElementB 中添加一个相对定位的 div，然后将 ElementA 放在那里。

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)设置为 relative 时，其中设置为 absolute 的 block 级元素将相对于父元素定位。因此，更改 div#menu 的 top 和 left 属性以满足您的需要。现在，如果 div#placeholder 移动，那么 div#menu 也会随之移动。

而且你的 JS 使用一些 CSS 会更干净!

此外，id 是完全通用的，可以根据需要更改它们:-) 如果您在 html 中更改它们，请更新 JS!