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

Question

我正在尝试使用jQuery来检测一个div元素(#olddiv)的位置，以便将另一个div元素(#newdiv)放置在其正下方。这两个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

谢谢

- Fred

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
});

如果需要在用户调整窗口大小时进行缩放，还要绑定this到window.onresize事件。

更新：另一个想法-这是否必须绝对定位？为什么不直接在DOM中将div插入到其他div后面？

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

那就确保它们具有相同的宽度。

- Jared

---

非常感谢您的出色回答。它必须是绝对的，因为我计划将其叠加在其他div上面。这就是为什么常规的after方法不起作用的原因。不过，您提供的最佳解决方案确实有效。谢谢 :) - Fred

Answer 2

jQuery UI团队正在开发一个非常不错的插件，它可以帮助处理位置。

让您能够做出这样的事情：

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

- PetersenDidIt

---

+1 简单易懂。为了保持最新，当使用插件并想要使用“collision”属性时，当前的jQuery 1.9.x与jQueryUI 1.9.x的组合似乎存在问题，其中“collision”属性的“flip”设置无法按预期工作。最后一个有效的组合似乎是jQuery 1.7.2和jQueryUI 1.8.20。它的jQueryUI错误跟踪器为：http://bugs.jqueryui.com/ticket/8710 - Nope

非常感谢您。 - Suhail Akhtar

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与旧的div不完全相同。

- yoda

Answer 4

看起来是个打字错误，需要修正：

'top', right
'right', top

有帮助吗？

为了使此代码正常工作，div 必须绝对或相对定位。

- Arne Roomann-Kurrik