将绝对位置转换为相对位置

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 属性也是如此，这样你的对象应该保持在它的位置变化
来自亲戚->绝对。

我不认为反之亦然。

演示代码： 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

您可以通过使用其 offsetLeft 和 offsetTop 值作为 left 和 top 样式，轻松地将其从相对更改为绝对。

反之则更难。您基本上必须将其更改为相对值并查看它结束的位置，然后根据当前偏移和所需位置计算新的偏移值。

请注意，当定位是相对的时，该元素是页面流的一部分，并且可能会影响其他元素。当位置为绝对位置时，该元素位于页面流之外，不会影响其他元素。因此，如果您在绝对定位和相对定位之间进行更改，并且不希望其他元素移动，则可能需要对其他元素进行更改。

Answer 5

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 +

等）