如何使用jQuery将一个元素相对于另一个元素进行定位？
我有一个隐藏的DIV，其中包含一个类似于工具栏的菜单。
我有一些DIV，当鼠标hover在它们上面时，能够显示菜单DIV。
是否有一个内置的function，将菜单DIV移动到活动（鼠标hover）DIV的右上angular？ 我正在寻找像$(menu).position("topright", targetEl);
tl; dr 🙁试试这里 ）
如果您有以下HTML：
<div id="menu" style="display: none;"> <!-- menu stuff in here --> <ul><li>Menu item</li></ul> </div> <div class="parent">Hover over me to show the menu here</div>
那么你可以使用下面的JavaScript代码：
$(".parent").mouseover(function() { // .position() uses position relative to the offset parent, var pos = $(this).position(); // .outerWidth() takes into account border and padding. var width = $(this).outerWidth(); //show the menu directly over the placeholder $("#menu").css({ position: "absolute", top: pos.top + "px", left: (pos.left + width) + "px" }).show(); });
但它不工作！
只要菜单和占位符具有相同的偏移父级，这将工作。 如果他们不这样做，而且您没有关注#menu元素在DOM中的哪个嵌套CSS规则，请使用：
$(this).append($("#menu"));
就在定位#menu元素的那一行之前。
但是它仍然不起作用！
你可能有一些奇怪的布局，不能用这种方法。 在这种情况下，只需使用jQuery.ui的位置插件 （如下面的答案中所述），即可处理所有可能的事件。 请注意，在调用position({...})之前，您必须show()菜单元素。 该插件不能定位隐藏的元素。
2012年3年后更新说明：
（原来的解决scheme在这里存档为后代）
所以，原来我在这里所采用的方法并不理想。 特别是在下列情况下会失败：
- 菜单的抵消父母不是占位符的抵消父母
- 占位符有一个边框/填充
幸运的是，jQuery在1.2.6中引入了方法（ position()和outerWidth() ），使得在后一种情况下find正确的值更容易。 对于前一种情况， append菜单元素append到占位符工作（但会基于嵌套分解CSS规则）。
你现在可以使用：
$("#my_div").position({ my: "left top", at: "left bottom", of: this, // or $("#otherdiv") collision: "fit" })
用于快速定位（ jQuery UI /位置 ）。
注意：这需要jQuery UI（不只是jQuery）。
你可以在这里下载jQuery UI 。
这到底是为我工作的。
var showMenu = function(el, menu) { //get the position of the placeholder element var pos = $(el).offset(); var eWidth = $(el).outerWidth(); var mWidth = $(menu).outerWidth(); var left = (pos.left + eWidth - mWidth) + "px"; var top = 3+pos.top + "px"; //show the menu directly over the placeholder $(menu).css( { position: 'absolute', zIndex: 5000, left: left, top: top } ); $(menu).hide().fadeIn(); };
这是我写的一个jQuery函数，可以帮助我定位元素。
以下是一个示例用法：
$(document).ready(function() { $('#el1').position('#el2', { anchor: ['br', 'tr'], offset: [-5, 5] }); });
上面的代码将＃el1的右下angular与＃el2的右上angularalignment。 ['cc'，'cc']将＃el2中的＃el1居中。 确保＃el1具有position：absolute和z-index：10000（或者一些非常大的数字）的CSS以保持在最上面。
偏移选项允许您按指定数量的像素微调坐标。
源代码如下：
jQuery.fn.getBox = function() { return { left: $(this).offset().left, top: $(this).offset().top, width: $(this).outerWidth(), height: $(this).outerHeight() }; } jQuery.fn.position = function(target, options) { var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1}; var defaults = { anchor: ['tl', 'tl'], animate: false, offset: [0, 0] }; options = $.extend(defaults, options); var targetBox = $(target).getBox(); var sourceBox = $(this).getBox(); //origin is at the top-left of the target element var left = targetBox.left; var top = targetBox.top; //alignment with respect to source top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height; left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width; //alignment with respect to target top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height; left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width; //add offset to final coordinates left += options.offset[0]; top += options.offset[1]; $(this).css({ left: left + 'px', top: top + 'px' }); }
为什么复杂太多了？ 解决scheme非常简单
CSS：
.active-div{ position:relative; } .menu-div{ position:absolute; top:0; right:0; display:none; }
jQuery的：
$(function(){ $(".active-div").hover(function(){ $(".menu-div").prependTo(".active-div").show(); },function(){$(".menu-div").hide(); })
它工作，即使，
- 两个div放在其他地方
- 浏览器重新resize
你可以使用jQuery插件PositionCalculator
这个插件还包含了碰撞处理（翻转），所以类似工具栏的菜单可以放置在可见的位置。
$(".placeholder").on('mouseover', function() { var $menu = $("#menu").show();// result for hidden element would be incorrect var pos = $.PositionCalculator( { target: this, targetAt: "top right", item: $menu, itemAt: "top left", flip: "both" }).calculate(); $menu.css({ top: parseInt($menu.css('top')) + pos.moveBy.y + "px", left: parseInt($menu.css('left')) + pos.moveBy.x + "px" }); });
对于那个标记：
<ul class="popup" id="menu"> <li>Menu item</li> <li>Menu item</li> <li>Menu item</li> </ul> <div class="placeholder">placeholder 1</div> <div class="placeholder">placeholder 2</div>
这是小提琴： http : //jsfiddle.net/QrrpB/1657/
像这样的东西？
$(menu).css("top", targetE1.y + "px"); $(menu).css("left", targetE1.x - widthOfMenu + "px");
这适用于我：
var posPersonTooltip = function(event) { var tPosX = event.pageX - 5; var tPosY = event.pageY + 10; $('#personTooltipContainer').css({top: tPosY, left: tPosX});
