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

时间:2010-03-30 14:01:59

标签: javascript jquery html positioning

是否可以将DIV位置从绝对位置更改为相对位置(以及相对于绝对位置)? DIV应该留在同一个地方。

5 个答案:

答案 0 :(得分:8)

由于评论中的格式不起作用,我将在此处发布解决方案

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

答案 1 :(得分:5)

您可以使用

更改该属性
$(object).css({position: 'absolute'});

例如:
您可以使用jQuery的方法.position().offset()来设置“top”和“left” css属性也是这样,你的对象应该保持它的位置变化 来自亲戚 - >绝对的。

我不认为这反过来。

演示代码:http://jsbin.com/uvoka

答案 2 :(得分:2)

如果你真的想得到一个元素的总顶部偏移量,该元素是具有绝对和相对位置的元素的子元素,你可以使用这个函数

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

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

这基本上是上面的plodder给出的解决方案的代码。

答案 3 :(得分:1)

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 +

等)

答案 4 :(得分:0)

使用offsetLeft和offsetTop值作为左侧和顶部样式,您可以很容易地将其从相对值更改为绝对值。

另一种方式更难。您基本上必须将其更改为相对并查看它的最终位置,然后从当前偏移量和所需位置计算新的偏移值。

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