Làm thế nào để định vị một div động dưới một cái khác?

Question

Tôi đang cố gắng sử dụng jQuery để phát hiện vị trí của div (#olddiv), vì vậy tôi có thể sử dụng vị trí đó để đặt một div khác (#newdiv) chính xác bên dưới nó. Đường viền bên phải của 2 div được căn chỉnh (đường viền phải).

Tôi đang cố gắng để có được các vị trí dưới cùng và bên phải #olddiv để sử dụng chúng làm đường viền trên cùng và bên phải #newdiv. Tôi đã sử dụng mã này, nhưng nó không hoạt động. Bất kỳ ý tưởng những gì tôi đang làm sai?

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

Ngoài ra, tôi không chắc chắn nếu position là những gì tôi cần. Tôi nghĩ rằng điều này có thể được thực hiện với position hoặc offset, nhưng tôi không chắc chắn:

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

Cảm ơn

Answer 1

Tôi đã sử dụng offset() cho các phần tử vị trí động. Hãy thử điều này:

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

cũng đừng quên liên kết sự kiện này với sự kiện window.onresize nếu bạn cần quy mô khi người dùng thay đổi kích thước cửa sổ.

CẬP NHẬT: một ý tưởng khác - điều này có được định vị hoàn toàn không? Tại sao không chỉ chèn div sau phần còn lại trong DOM?

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

sau đó chỉ cần đảm bảo chúng có cùng chiều rộng.

Answer 2

Trông giống như một lỗi đánh máy, không sửa chữa:

'top', right 
'right', top 

giúp đỡ ở tất cả?

Các div cần được định vị hoàn toàn hoặc tương đối để mã này hoạt động.

Answer 3

Tôi đã sử dụng nó trong một trang web tôi đã thực hiện, để hiển thị div ở một vị trí nhất định, luôn luôn liên quan đến div khác và luôn liên quan đến kích thước của cửa sổ trình duyệt (ngay cả khi bạn kéo nó theo cách thủ công).

Dưới đây là các mã:

// 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(); 

Lưu ý rằng bạn có thể cần thêm vars khác với css trên, như lợi nhuận, đệm, vv, để có được vị trí đúng, hoặc thậm chí thêm bằng tay giá trị nào trên cùng và bên trái, trong trường hợp div mới không chính xác như cũ.

Answer 4

Có một cách khá thú vị plugin được phát triển bởi nhóm UI jQuery giúp với position.

Cho phép bạn làm điều gì đó như thế này:

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