如何將div動態定位在另一個之下？

Question

我想使用jQuery來檢測div的位置（#olddiv），所以我可以使用該位置將另一個div（#newdiv）正好放在它下面。 2個div的右邊界對齊（右邊界）。

我試圖讓#olddiv底部和右側的位置將它們用作#newdiv的頂部和右側邊框。我已經使用了這段代碼，但它不起作用。任何想法我做錯了什麼？我不知道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

看起來像一個錯字，不固定：

'top', right 
'right', top 

幫助呢？

divs需要被絕對或相對定位才能使代碼正常工作。

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

有一個很酷的plugin由jQuery UI團隊開發，可以幫助position。

讓您做這樣的事情：

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