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

Question

是否可以將DIV位置從絕對位置更改為相對位置（以及相對於絕對位置）？ DIV應該留在同一個地方。

Answer 1

由於評論中的格式不起作用，我將在此處發布解決方案

$(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 2

你可以改變那個屬性

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

例如：
你可以使用jQuery的方法.position()或.offset()來設置“top”和“left”css屬性，這樣你的對象就應該保持它的位置從relative - > absolute變化。

我不認為這樣做反之亦然。

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

Answer 3

如果您真的想要獲得具有絕對和相對位置的元素的子元素的總頂部偏移量，則可以使用此函數

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

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

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

Answer 4

prototype.js有element.absolutize（）和element.relativize，它們運行得很好。

從相對到絕對的問題是element.offsetTop和offsetLeft

僅將元素的偏移量賦予其父元素。 您需要測量累積偏移量（即

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

通過使用offsetLeft和offsetTop值作為左側和頂部樣式，您可以非常輕松地將其從相對值更改為絕對值。

另一種方式更難。 您基本上必須將其更改為相對並查看它的最終位置，然后從當前偏移量和所需位置計算新的偏移值。

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