我想将 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 放在那里。
最佳答案
编辑:在这里查看一个实例: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!
关于javascript - jQuery:将元素放在另一个旁边并将其固定在那里,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5319624/