Chuyển đổi vị trí tuyệt đối thành số

Question

Có thể thay đổi vị trí DIV từ tuyệt đối thành tương đối (và từ tương đối so với tuyệt đối) không? DIV sẽ vẫn ở cùng một vị trí.

Answer 1

bạn có thể thay đổi thuộc tính với

$(object).css({position: 'absolute'}); 

Ví dụ:
Bạn có thể sử dụng phương pháp của jQuery .position() hoặc .offset() để thiết lập "đỉnh" và thuộc tính css "trái" là tốt, như vậy đối tượng của bạn nên ở lại tại vị trí của nó thay đổi từ tương đối -> tuyệt đối.

Tôi không nghĩ rằng nó hoạt động ngược lại.

code demo: http://jsbin.com/uvoka

Answer 2

Bạn có thể khá dễ dàng thay đổi nó từ liên quan đến tuyệt đối bằng cách sử dụng nó offsetLeft và offsetTop giá trị như phong cách trái và đỉnh.

Cách khác xung quanh khó hơn. Bạn về cơ bản sẽ phải thay đổi nó thành tương đối và xem nơi nó kết thúc, sau đó tính toán các giá trị bù đắp mới từ bù đắp hiện tại và vị trí mong muốn.

Lưu ý rằng khi định vị tương đối, phần tử là một phần của luồng trang và có thể ảnh hưởng đến các yếu tố khác. Khi vị trí tuyệt đối, phần tử nằm ngoài luồng trang và không ảnh hưởng đến các phần tử khác. Vì vậy, nếu bạn thay đổi giữa vị trí tuyệt đối và tương đối, bạn có thể cần thực hiện các thay đổi đối với các phần tử khác nếu bạn không muốn chúng di chuyển.

Answer 3

Bởi vì định dạng trong ý kiến ​​là không làm việc tôi sẽ công bố giải pháp ở đây

$(object).css({position: 'absolute',top: dy, left:dx}); 
// dy, dx - some coordinates 
$(object).css({position: 'relative'}); 

Không làm việc: Vị trí nguyên tố sau khi thay đổi để tương đối là khác nhau.

Nhưng khi tôi lưu trữ bù đắp và đặt nó một lần nữa sau khi thay đổi để tương đối, vị trí là như nhau:

$(object).css({position: 'absolute',top: dy, left:dx}); 
var x = $(object).offset().left; 
var y = $(object).offset().top; 
$(object).css({position: 'relative'}); 
$(object).offset({ top: y, left: x }); 

Answer 4

prototype.js có element.absolutize() và element.relativize mà làm việc rất tốt.

Vấn đề với đi từ liên quan đến tuyệt đối là element.offsetTop và offsetLeft

chỉ cung cấp cho các bù đắp của nguyên tố của bạn để mẹ của nó. Bạn cần phải đo cumualtive bù đắp (tức

the offset of your element to its parent + 
the offset of the parent to its parent + 
the offset of its parent to its parent + 

vv)

Answer 5

Nếu bạn thực sự muốn có được tổng đầu bù đắp của một phần tử đó là một đứa trẻ của các nguyên tố với vị trí tuyệt đối và tương đối bạn có thể sử dụng chức năng này

function calcTotalOffsetTop(elm) 
{ 
var totalOffsetTop = 0, 
curr   = elm; 

while(curr.parent().is(':not(body)')) 
{ 
    curr   = curr.parent(); 
    totalOffsetTop += curr[0].offsetTop; 
} 
return totalOffsetTop; 
} 

đây là mã cơ bản cho giải pháp do plodder đưa ra ở trên.