(在这里试试)

如果你有以下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();
});

但是不管用!

这将工作，只要菜单和占位符有相同的偏移父。如果它们没有，并且你没有嵌套的CSS规则来关心#menu元素在DOM中的位置，使用:

$(this).append($("#menu"));

就在定位#menu元素的行之前。

但是还是不行!

你可能有一些奇怪的布局不适合这种方法。在这种情况下，只需使用jQuery。Ui的位置插件(在下面的回答中提到过)，它处理所有可能发生的情况。注意，你必须在调用position({…})之前显示()菜单元素;插件不能定位隐藏的元素。

3年后的2012年更新说明:

(原始解决方案存档于此，以供后人参考)

所以，原来的方法并不理想。特别是，在以下情况下，它会失败:

菜单的偏移父级不是占位符的偏移父级 占位符有边框/填充

幸运的是，jQuery早在1.2.6中就引入了方法(position()和outerWidth())，这使得在后一种情况下更容易找到正确的值。对于前一种情况，将菜单元素附加到占位符可以工作(但将破坏基于嵌套的CSS规则)。

你可以使用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/

这对我来说很管用:

var posPersonTooltip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 10;
$('#personTooltipContainer').css({top: tPosY, left: tPosX});

为什么这么复杂?解决方法很简单

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 浏览器调整大小

(在这里试试)

如果你有以下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();
});

但是不管用!

这将工作，只要菜单和占位符有相同的偏移父。如果它们没有，并且你没有嵌套的CSS规则来关心#menu元素在DOM中的位置，使用:

$(this).append($("#menu"));

就在定位#menu元素的行之前。

但是还是不行!

你可能有一些奇怪的布局不适合这种方法。在这种情况下，只需使用jQuery。Ui的位置插件(在下面的回答中提到过)，它处理所有可能发生的情况。注意，你必须在调用position({…})之前显示()菜单元素;插件不能定位隐藏的元素。

3年后的2012年更新说明:

(原始解决方案存档于此，以供后人参考)

所以，原来的方法并不理想。特别是，在以下情况下，它会失败:

菜单的偏移父级不是占位符的偏移父级 占位符有边框/填充

幸运的是，jQuery早在1.2.6中就引入了方法(position()和outerWidth())，这使得在后一种情况下更容易找到正确的值。对于前一种情况，将菜单元素附加到占位符可以工作(但将破坏基于嵌套的CSS规则)。

注意:这需要jQuery UI(不仅仅是jQuery)。

你现在可以使用:

$("#my_div").position({
    my:        "left top",
    at:        "left bottom",
    of:        this, // or $("#otherdiv")
    collision: "fit"
});

用于快速定位(jQuery UI/Position)。

你可以在这里下载jQuery UI。