Question

我正在尝试使用jQuery来检测div（#olddiv）的位置，因此我可以使用该位置在其下方放置另一个div（#newdiv）。 2个div的右边界对齐（右边框）。

我正在尝试获取#olddiv底部和右侧位置，以将它们用作#newdiv顶部和右侧边框。我已经使用过这段代码了，但它没有用。知道我做错了什么吗？

var right = $('#olddiv').position().right;
var top = $('#olddiv').position().bottom;
$('#newdiv').css('top', right);
$('#newdiv').css('right', top);

另外，我不确定position是否是我需要的。我认为这可以通过position或offset完成，但我不确定：

$('#ID').position().left
$('#ID').offset().left

由于

Answer 1

我已经使用offset（）来动态定位元素。试试这个：

var offset = $('#olddiv').offset();
var height = $('#olddiv').height();
var width = $('#olddiv').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$('#ID').css( {
    'position': 'absolute',
    'right': right,
    'top': top
});

如果您需要在用户调整窗口大小时进行缩放，也不要忘记将其绑定到window.onresize事件。

更新：另一个想法 - 这必须绝对定位吗？为什么不在DOM中插入另一个div？

$('#olddiv').after($('#ID').html());

然后确保它们的宽度相同。

Answer 2

jQuery UI团队正在开发一个非常酷的plugin，可以帮助position。

让你做这样的事情：

$(".menu").position({ my: "left top", at: "left bottom", of: ".menubutton" });

Answer 3

我在我制作的网站中使用它，在某个位置显示div，始终相对于另一个div并始终相对于浏览器窗口的尺寸（即使您手动拉伸它）。

以下是代码：

// function to place the div
var newdiv = function () {
   var o = $('#olddiv').offset();
   var h = $('#olddiv').height();
   var w = $('#olddiv').width();
   $('#newdiv').css({'top': o.top,
                     'left': o.left,
                     'width': w,
                     'height': h       
   }).show();
}

// listen the window changes and correct the newdiv position
$(window).resize(function(){ newdiv(); });

// display the newdiv after DOM is loaded, or whenever you want
newdiv();

请注意，您可能需要在上面的css中添加另一个变量，如边距，填充等，以便获得正确的位置，或者甚至手动将值添加到顶部和左侧，以防新的div不是就像旧的一样。

Answer 4

看起来像一个拼写错误，修复：

'top', right
'right', top

有帮助吗？

div必须绝对或相对定位才能使此代码也能正常工作。

如何将div动态定位在另一个下方？

4 个答案: