將絕對位置轉換爲相對位置

Question

是否可以將DIV位置從絕對位置改變爲相對位置（以及相對於絕對位置）？ DIV應保持在同一地點。

Answer 1

您可以更改屬性與

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

例如：
你可以使用jQuery的方法.position()或.offset()設置「頂」和「左」 CSS屬性藏漢，這樣，你的對象應該留下在它的位置從相對 - >絕對變化 。

我不認爲這是反之亦然。

演示代碼：http://jsbin.com/uvoka

Answer 2

你可以很容易地從相對使用其更改爲絕對的offsetLeft和價值觀的offsetTop左和頂部的風格。

另一種解決方法比較困難。您基本上必須將其更改爲相對值並查看其結束位置，然後根據當前偏移量和所需位置計算新的偏移值。

請注意，當定位是相對的時，該元素是頁面流的一部分，可能會影響其他元素。當位置是絕對位置時，該元素位於頁面流之外，不會影響其他元素。因此，如果您在絕對定位和相對定位之間切換，您也可能需要對其他元素進行更改，如果您不希望它們移動。

Answer 3

因爲在評論格式不工作，我會在這裏發佈

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

解決方案不起作用：更改爲相對後元素位置是不同的。

但是，當我存儲的偏移並改變相對之後再進行設置，位置是相同的：

$(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中有element.absolutize（）和element.relativize它工作得很好。

從相對於絕對要的問題是， element.offsetTop和offsetLeft

只給你的元素到其父的偏移。 你需要測量cumualtive偏移量（即

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

等）

Answer 5

如果你真的想要得到的總頂部是絕對和相對位置元素的子元素的偏移你能使用此功能

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

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

這是基本上上面給出的解決方案的代碼。