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

Question

我正在尝试使用jQuery来检测div(#olddiv)的位置,因此我可以使用该位置#newdiv在其下方放置另一个div().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团队开发,有助于定位.

让你做这样的事情:

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